<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    javaScript 初识 |  虎虎生辉
  </title>
  
  <link rel="shortcut icon" href="/blog/favicon.ico" />
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
<script src="/blog/js/pace.min.js"></script>


  

  

<meta name="generator" content="Hexo 6.0.0"></head>

</html>

<body>
  <div id="app">
    <main class="content">
      <section class="outer">
  <article id="post-ES5a" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  javaScript 初识
</h1>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2017/12/01/ES5a/" class="article-date">
  <time datetime="2017-11-30T16:00:00.000Z" itemprop="datePublished">2017-12-01</time>
</a>
      
    </div>
    

    
    
    <div class="tocbot"></div>





    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <p>[toc]</p>
<h2 id="一、js数据类型"><a href="#一、js数据类型" class="headerlink" title="一、js数据类型"></a>一、js数据类型</h2><h3 id="（一）原始类型"><a href="#（一）原始类型" class="headerlink" title="（一）原始类型"></a>（一）原始类型</h3><h4 id="1-数字-number"><a href="#1-数字-number" class="headerlink" title="1.数字 number"></a>1.数字 number</h4><blockquote>
<p>直接书写 十进制<br>0前缀 八进制<br>0x前缀  十六进制<br>0b前缀 二进制</p>
</blockquote>
<h4 id="2-字符串-string"><a href="#2-字符串-string" class="headerlink" title="2.字符串 string"></a>2.字符串 string</h4><blockquote>
<p>单引号 ‘’<br>双引号 “”<br>模板 ``</p>
</blockquote>
<table>
<thead>
<tr>
<th align="center">转义字符</th>
<th align="center">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="center">&#39;</td>
<td align="center">单引号</td>
</tr>
<tr>
<td align="center">&quot;</td>
<td align="center">双引号</td>
</tr>
<tr>
<td align="center">\</td>
<td align="center">反斜杠</td>
</tr>
<tr>
<td align="center">\n</td>
<td align="center">换行</td>
</tr>
<tr>
<td align="center">\t</td>
<td align="center">制表符</td>
</tr>
</tbody></table>
<h4 id="3-布尔-boolean"><a href="#3-布尔-boolean" class="headerlink" title="3.布尔 boolean"></a>3.布尔 boolean</h4><blockquote>
<p>true 真<br>false 假</p>
</blockquote>
<h4 id="4-未定义-undefined"><a href="#4-未定义-undefined" class="headerlink" title="4.未定义 undefined"></a>4.未定义 undefined</h4><blockquote>
<p>undefined</p>
</blockquote>
<h4 id="5-空-null"><a href="#5-空-null" class="headerlink" title="5.空 null"></a>5.空 null</h4><blockquote>
<p>null</p>
</blockquote>
<h3 id="（二）引用类型"><a href="#（二）引用类型" class="headerlink" title="（二）引用类型"></a>（二）引用类型</h3><h4 id="1-对象-object"><a href="#1-对象-object" class="headerlink" title="1.对象 object"></a>1.对象 object</h4><blockquote>
<p>{}</p>
</blockquote>
<h4 id="2-函数-function"><a href="#2-函数-function" class="headerlink" title="2.函数 function"></a>2.函数 function</h4><blockquote>
<p>function () {}</p>
</blockquote>
<hr>
<h2 id="二、变量"><a href="#二、变量" class="headerlink" title="二、变量"></a>二、变量</h2><h3 id="1-概念"><a href="#1-概念" class="headerlink" title="1.概念"></a>1.概念</h3><h4 id="（1）什么是变量？"><a href="#（1）什么是变量？" class="headerlink" title="（1）什么是变量？"></a>（1）什么是变量？</h4><ul>
<li>一块内存空间，用于存储数据</li>
</ul>
<h4 id="（2）变量声明"><a href="#（2）变量声明" class="headerlink" title="（2）变量声明"></a>（2）变量声明</h4><blockquote>
<p>var 变量名</p>
</blockquote>
<h4 id="（3）变量赋值"><a href="#（3）变量赋值" class="headerlink" title="（3）变量赋值"></a>（3）变量赋值</h4><blockquote>
<p>变量名 = 数据</p>
</blockquote>
<h3 id="2-特点"><a href="#2-特点" class="headerlink" title="2.特点"></a>2.特点</h3><h4 id="（1）变量的值是可变的"><a href="#（1）变量的值是可变的" class="headerlink" title="（1）变量的值是可变的"></a>（1）变量的值是可变的</h4><ul>
<li>变量可以重复赋值，新的值会覆盖原来的值</li>
</ul>
<h4 id="（2）变量命名规范"><a href="#（2）变量命名规范" class="headerlink" title="（2）变量命名规范"></a>（2）变量命名规范</h4><ul>
<li>只能使用字母、下划线、$、数字</li>
<li>只能以字母、下划线、$开头</li>
<li>不能使用关键字、保留字</li>
<li>做到见名知义</li>
<li>多个单词小驼峰命名法</li>
</ul>
<h4 id="（3）变量声明赋值可以合并书写（语法糖）"><a href="#（3）变量声明赋值可以合并书写（语法糖）" class="headerlink" title="（3）变量声明赋值可以合并书写（语法糖）"></a>（3）变量声明赋值可以合并书写（语法糖）</h4><blockquote>
<p>var name = “huafu”;</p>
</blockquote>
<h4 id="（4）多个变量声明赋值可以合并书写（语法糖）"><a href="#（4）多个变量声明赋值可以合并书写（语法糖）" class="headerlink" title="（4）多个变量声明赋值可以合并书写（语法糖）"></a>（4）多个变量声明赋值可以合并书写（语法糖）</h4><blockquote>
<p>var a = 1, b = 2, c = 3;</p>
</blockquote>
<h4 id="（5）任何书写数据的地方，都可书写变量"><a href="#（5）任何书写数据的地方，都可书写变量" class="headerlink" title="（5）任何书写数据的地方，都可书写变量"></a>（5）任何书写数据的地方，都可书写变量</h4><h4 id="（6）使用未声明的变量时，会产生错误"><a href="#（6）使用未声明的变量时，会产生错误" class="headerlink" title="（6）使用未声明的变量时，会产生错误"></a>（6）使用未声明的变量时，会产生错误</h4><ul>
<li>例外 typeof 判断变量类型使用未声明的变量不会报错</li>
</ul>
<h4 id="（7）js里存在变量声明提升"><a href="#（7）js里存在变量声明提升" class="headerlink" title="（7）js里存在变量声明提升"></a>（7）js里存在变量声明提升</h4><ul>
<li>提升不会超越脚本快</li>
</ul>
<h4 id="（8）js里变量可以重复声明"><a href="#（8）js里变量可以重复声明" class="headerlink" title="（8）js里变量可以重复声明"></a>（8）js里变量可以重复声明</h4><ul>
<li>声明提升后会合并</li>
</ul>
<h3 id="3-变量与对象"><a href="#3-变量与对象" class="headerlink" title="3.变量与对象"></a>3.变量与对象</h3><h4 id="（1）书写"><a href="#（1）书写" class="headerlink" title="（1）书写"></a>（1）书写</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> user = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;huafu&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="（2）属性操作方式"><a href="#（2）属性操作方式" class="headerlink" title="（2）属性操作方式"></a>（2）属性操作方式</h4><blockquote>
<p>user.name</p>
</blockquote>
<blockquote>
<p>user[“name”]</p>
</blockquote>
<h4 id="（3）增删改查"><a href="#（3）增删改查" class="headerlink" title="（3）增删改查"></a>（3）增删改查</h4><ul>
<li>访问不存在的对象时，会产生错误</li>
<li>访问对象不存在的属性时，不会报错，undefined</li>
<li>给对象不存在的属性赋值时，会添加此属性</li>
<li>给对象的属性重新赋值时，修改此属性值</li>
<li>delete 操作符删除对象属性</li>
</ul>
<h4 id="（4）属性表达式"><a href="#（4）属性表达式" class="headerlink" title="（4）属性表达式"></a>（4）属性表达式</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> user = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;huafu&quot;</span>,</span><br><span class="line">  <span class="string">&quot;age&quot;</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="number">1</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">&quot;??&quot;</span>: <span class="literal">undefined</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> prop = <span class="string">&quot;name&quot;</span>;</span><br><span class="line">user[prop]</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<ul>
<li>实际上，js对属性名没有严格限制，可以是任何形式</li>
<li>访问特殊的属性名，只能使用属性表达式，否则不满足语法要求</li>
<li>使用属性表达式，放置一个变量，改变变量内容，就可以实现访问不同的对象属性</li>
</ul>
<h4 id="（5）全局对象"><a href="#（5）全局对象" class="headerlink" title="（5）全局对象"></a>（5）全局对象</h4><ul>
<li>js大部分的宿主环境，都会提供一个特殊的对象，该对象可以直接访问（全局对象）</li>
<li>在浏览器环境中，全局对象为window，表示整个窗口</li>
<li>全局对象的属性可以直接使用属性名访问，不需要书写对象名</li>
<li>开发者声明的所有变量，实际上都会成为window对象的属性</li>
<li>如果变量没有赋值，该变量不会覆盖window对象的同名属性 </li>
<li>window.name属性比较特殊，任何类型的赋值都会变成字符串类型的内容</li>
<li>变量未经声明就赋值，等于给window对象增加此属性</li>
</ul>
<h4 id="（6）内存空间"><a href="#（6）内存空间" class="headerlink" title="（6）内存空间"></a>（6）内存空间</h4><h5 id="1）变量存储的信息"><a href="#1）变量存储的信息" class="headerlink" title="1）变量存储的信息"></a>1）变量存储的信息</h5><ul>
<li><p>变量赋值原始类型，存放的是数据内容</p>
<ul>
<li>使用变量进行赋值的时候，直接复制变量内存储的数据</li>
<li>当一个变量内容发生改变时，其它变量不会受影响</li>
</ul>
</li>
<li><p>变量赋值引用类型，存放的是数据内容的地址引用</p>
<ul>
<li>使用变量进行赋值的时候，复制的是变量内存储的地址引用</li>
<li>当其中一个变量对引用数据进行操作时，所有相同引用的变量内容都将受影响</li>
</ul>
</li>
<li><p>所有出现对象字面量的地方，都将会在内存空间里开辟新对象</p>
<ul>
<li>对象属性存储的是一个对象时，此属性保存的其实是对一个对象的引用</li>
</ul>
</li>
</ul>
<h5 id="2）垃圾回收"><a href="#2）垃圾回收" class="headerlink" title="2）垃圾回收"></a>2）垃圾回收</h5><ul>
<li>内存中无法访问到的对象（没有任何引用指向），会被视为垃圾</li>
<li>js引擎会在合适的时间将其占用的内存释放</li>
</ul>
<hr>
<h2 id="三、运算符"><a href="#三、运算符" class="headerlink" title="三、运算符"></a>三、运算符</h2><h3 id="1-概述"><a href="#1-概述" class="headerlink" title="1.概述"></a>1.概述</h3><h4 id="（1）操作符-amp-操作数"><a href="#（1）操作符-amp-操作数" class="headerlink" title="（1）操作符&amp;操作数"></a>（1）操作符&amp;操作数</h4><ul>
<li>操作符：运算符、参与运算的符号<ul>
<li>操作符不一定只是一个符号</li>
<li>操作符出现在不同的位置，可能具有不同的意义</li>
</ul>
</li>
<li>操作数：参与操作的数据，也称之为“元”</li>
</ul>
<h4 id="（2）分类"><a href="#（2）分类" class="headerlink" title="（2）分类"></a>（2）分类</h4><ul>
<li>按操作数的数量分<ul>
<li>一元（目）：() . [] {}</li>
<li>二元（目）: + - * / % =</li>
<li>三元（目）：?:</li>
</ul>
</li>
</ul>
<h4 id="（3）表达式"><a href="#（3）表达式" class="headerlink" title="（3）表达式"></a>（3）表达式</h4><ul>
<li>表达式 = 操作符 + 操作数</li>
<li>返回值：每个表达式都会返回一个运算结果</li>
<li>返回类型：返回值的类型</li>
<li>表达式就是数据，所有书写数据的地方都可以书写表达式</li>
</ul>
<h4 id="（4）返回值"><a href="#（4）返回值" class="headerlink" title="（4）返回值"></a>（4）返回值</h4><table>
<thead>
<tr>
<th align="center">操作符</th>
<th align="center">含义</th>
<th align="center">返回值</th>
</tr>
</thead>
<tbody><tr>
<td align="center">=</td>
<td align="center">赋值表达式</td>
<td align="center">返回赋值的结果</td>
</tr>
<tr>
<td align="center">.</td>
<td align="center">属性访问表达式</td>
<td align="center">返回该属性的属性值</td>
</tr>
<tr>
<td align="center">[]</td>
<td align="center">属性访问表达式</td>
<td align="center">返回该属性的属性值</td>
</tr>
<tr>
<td align="center">()</td>
<td align="center">函数调用表达式</td>
<td align="center">返回值取决于函数运行</td>
</tr>
<tr>
<td align="center">var</td>
<td align="center">变量声明表达式</td>
<td align="center">返回undefined</td>
</tr>
</tbody></table>
<h3 id="2-算数运算符（数学运算符）"><a href="#2-算数运算符（数学运算符）" class="headerlink" title="2.算数运算符（数学运算符）"></a>2.算数运算符（数学运算符）</h3><table>
<thead>
<tr>
<th align="center">运算符</th>
<th align="center">含义</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">+</td>
<td align="center">求和表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">-</td>
<td align="center">求差表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">*</td>
<td align="center">求积表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">/</td>
<td align="center">求商表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">%</td>
<td align="center">求余表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">++</td>
<td align="center">自增表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">–</td>
<td align="center">自减表达式</td>
<td align="center">——</td>
</tr>
</tbody></table>
<h4 id="（1）运算细节"><a href="#（1）运算细节" class="headerlink" title="（1）运算细节"></a>（1）运算细节</h4><ul>
<li>数字运算是不精确的</li>
<li>除数为0，结果无穷<ul>
<li>被除数为正数（infinity）</li>
<li>被除数为0（NaN）</li>
<li>被除数为负数（-infinity）</li>
</ul>
</li>
<li>无法运算，返回值为NaN</li>
<li>% 求余与求模有区别（求余返回值符号与被余数保持一致）</li>
<li>typeof返回值类型为string</li>
<li>isNaN()函数返回值类型为boolean</li>
<li>isFinite()函数返回值类型为boolean</li>
</ul>
<h4 id="（2）非number类型运算"><a href="#（2）非number类型运算" class="headerlink" title="（2）非number类型运算"></a>（2）非number类型运算</h4><h5 id="1）-非-运算"><a href="#1）-非-运算" class="headerlink" title="1） 非 + 运算"></a>1） 非 + 运算</h5><ul>
<li>原始值自动转化为数字，再运算</li>
<li>NaN与任何数运算，结果为NaN</li>
<li>Infinity与任何数运算，结果为Infinity<blockquote>
<p>-5**2 ==&gt; 报错<br>(-5)**2 ==&gt; 25</p>
</blockquote>
</li>
</ul>
<table>
<thead>
<tr>
<th align="center">转换值</th>
<th align="center">结果</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">boolean：false</td>
<td align="center">0</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">boolean：true</td>
<td align="center">1</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">string：数字</td>
<td align="center">数值</td>
<td align="center">能识别Infinity</td>
</tr>
<tr>
<td align="center">string：非数</td>
<td align="center">NaN</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">string：空串</td>
<td align="center">0</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">string：空格</td>
<td align="center">0</td>
<td align="center">转换会忽略前后空格</td>
</tr>
<tr>
<td align="center">null</td>
<td align="center">0</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">undefined</td>
<td align="center">NaN</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">{}</td>
<td align="center">“[object Object]” ==&gt; NaN</td>
<td align="center">对象转换为字符串</td>
</tr>
</tbody></table>
<ul>
<li>引用值自动转化为字符串，再转换为数字，然后运算<blockquote>
<p>{}*5 ==&gt; 报错<br>({})*5 ==&gt; NaN</p>
</blockquote>
</li>
</ul>
<h5 id="2）-运算"><a href="#2）-运算" class="headerlink" title="2） + 运算"></a>2） + 运算</h5><ul>
<li>操作数有字符串参与，含义为字符串拼接</li>
<li>若只有一个操作数为字符串，另一个操作数自动转换为字符串，然后拼接</li>
<li>若有一个操作数为对象，对象自动转换为字符串，然后拼接</li>
</ul>
<h4 id="（3）自增自减-–"><a href="#（3）自增自减-–" class="headerlink" title="（3）自增自减 ++ –"></a>（3）自增自减 ++ –</h4><ul>
<li>自增、自减1</li>
<li>操作符在前：表达式返回值为变量自增后的值</li>
<li>操作符在后：表达式返回值为变量自增前的值</li>
<li>操作符在前在后，对于变量来说，结果都一样</li>
<li>操作符在前在后，对于运算来说，由于表达式的返回值不一样，结果也会相应改变</li>
</ul>
<h4 id="（4）优先级"><a href="#（4）优先级" class="headerlink" title="（4）优先级"></a>（4）优先级</h4><h5 id="1）从高到底"><a href="#1）从高到底" class="headerlink" title="1）从高到底"></a>1）从高到底</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">++ --</span><br><span class="line">* / %</span><br><span class="line">+ - </span><br></pre></td></tr></table></figure>

<h5 id="2）运算规则"><a href="#2）运算规则" class="headerlink" title="2）运算规则"></a>2）运算规则</h5><ul>
<li>从左到右依次进行</li>
<li>若相连两运算符，左边优先级高于等于右边，则直接运算</li>
<li>若相连两运算符，左边优先级低于右边，则继续往后进行</li>
</ul>
<h4 id="（5）求余与求模"><a href="#（5）求余与求模" class="headerlink" title="（5）求余与求模"></a>（5）求余与求模</h4><ul>
<li>求余 %<blockquote>
<p>x % y<br>x - n * y n的取值为x/y的商取整（==向0取整==）</p>
</blockquote>
</li>
<li>求模<blockquote>
<p>x % y<br>x - n * y n的取值为x/y的商取整（==向下取整==）</p>
</blockquote>
</li>
<li>区别<ul>
<li>只有在余数为负数时才有区别</li>
<li>求余的符号与被除数相同</li>
<li>求模的符号与除数相同</li>
</ul>
</li>
</ul>
<hr>
<h3 id="3-比较运算符"><a href="#3-比较运算符" class="headerlink" title="3.比较运算符"></a>3.比较运算符</h3><table>
<thead>
<tr>
<th align="center">运算符</th>
<th align="center">含义</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">&gt;</td>
<td align="center">大于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">&gt;=</td>
<td align="center">大于等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">&lt;</td>
<td align="center">小于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">&lt;=</td>
<td align="center">小于等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">==</td>
<td align="center">等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">!=</td>
<td align="center">不等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">===</td>
<td align="center">恒等于表达式</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">!==</td>
<td align="center">不恒等于达式</td>
<td align="center">——</td>
</tr>
</tbody></table>
<h4 id="（1）比较大小"><a href="#（1）比较大小" class="headerlink" title="（1）比较大小"></a>（1）比较大小</h4><ul>
<li>表达式的返回值类型：boolean</li>
<li>优先级低于算数运算符</li>
<li>两个是数字比较大小</li>
<li>两个是字符串比较ASCII码顺序</li>
<li>原始值的其它类型，自动转化为数字，再比较</li>
<li>NaN与任何比较都是false</li>
<li>+Infinity比任何数都大</li>
<li>-Infinity比任何数都小</li>
<li>引用值的其它类型，自动转化为字符串，再转化为数字，然后比较</li>
</ul>
<h4 id="（2）比较相等"><a href="#（2）比较相等" class="headerlink" title="（2）比较相等"></a>（2）比较相等</h4><ul>
<li>原始值比较数据</li>
<li>引用值比较地址</li>
<li>undefined与null比较相等，与0、false比较则不等</li>
<li>其它原始类型先转换为数字，再比较</li>
<li>NaN与任何比较都不想等，包括自身</li>
<li>+Infinity、-Infinity只跟自身相等，与其它不等</li>
</ul>
<h4 id="（3）严格相等"><a href="#（3）严格相等" class="headerlink" title="（3）严格相等 === !=="></a>（3）严格相等 === !==</h4><ul>
<li>两端数据和类型都必须相同才为true</li>
<li>两端数据和类型只要有一个不同就为false</li>
<li>undefined与null比较：false</li>
<li>NaN与任何比较，包括自身：false</li>
<li>+Infinity、-Infinity只跟自身相等，与其它不等</li>
</ul>
<hr>
<h3 id="4-逻辑运算符"><a href="#4-逻辑运算符" class="headerlink" title="4.逻辑运算符"></a>4.逻辑运算符</h3><table>
<thead>
<tr>
<th align="center">运算符</th>
<th align="center">含义</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">&amp;&amp;</td>
<td align="center">与</td>
<td align="center">并且</td>
</tr>
<tr>
<td align="center">||</td>
<td align="center">或</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">！</td>
<td align="center">非</td>
<td align="center">——</td>
</tr>
</tbody></table>
<h4 id="1-A-amp-amp-B"><a href="#1-A-amp-amp-B" class="headerlink" title="(1) A &amp;&amp; B"></a>(1) A &amp;&amp; B</h4><ul>
<li><p>null、undefined、false、NaN、””、0 均为false</p>
</li>
<li><p>若表达式A的结果为fale</p>
<ul>
<li>忽略表达式B（不运行）</li>
<li>返回表达式A的结果</li>
</ul>
</li>
<li><p>若表达式A的结果为true</p>
<ul>
<li>运行表达式B</li>
<li>返回表达式B的结果</li>
</ul>
</li>
</ul>
<h4 id="2-A-B"><a href="#2-A-B" class="headerlink" title="(2) A || B"></a>(2) A || B</h4><ul>
<li><p>null、undefined、false、NaN、””、0 均为false</p>
</li>
<li><p>若表达式A的结果为true</p>
<ul>
<li>忽略表达式B（不运行）</li>
<li>返回表达式A的结果</li>
</ul>
</li>
<li><p>若表达式A的结果为false</p>
<ul>
<li>运行表达式B</li>
<li>返回表达式B的结果</li>
</ul>
</li>
</ul>
<h4 id="（3）-A"><a href="#（3）-A" class="headerlink" title="（3）!A"></a>（3）!A</h4><ul>
<li>表达式A的结果转化为boolean</li>
<li>boolean结果取反返回</li>
</ul>
<hr>
<h3 id="5-三目运算"><a href="#5-三目运算" class="headerlink" title="5.三目运算"></a>5.三目运算</h3><p><strong>A ？B : C</strong></p>
<ul>
<li>如果表达式A的结果为true<ul>
<li>运行并返回表达式B的结果</li>
<li>忽略表达式C（不运行）</li>
</ul>
</li>
<li>如果表达式A的结果为false<ul>
<li>运行并返回表达式C的结果</li>
<li>忽略表达式B（不运行）</li>
</ul>
</li>
</ul>
<hr>
<h3 id="6-赋值运算符"><a href="#6-赋值运算符" class="headerlink" title="6.赋值运算符"></a>6.赋值运算符</h3><table>
<thead>
<tr>
<th align="center">运算符</th>
<th align="center">含义</th>
<th align="center">特性</th>
</tr>
</thead>
<tbody><tr>
<td align="center">=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">+=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">-=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">*=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">/=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">%=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center">**=</td>
<td align="center">赋值</td>
<td align="center">——</td>
</tr>
</tbody></table>
<hr>
<h3 id="7-其它运算符"><a href="#7-其它运算符" class="headerlink" title="7.其它运算符"></a>7.其它运算符</h3><ul>
<li>typeof(A) 获取表达式A结果的类型，返回值类型为字符串</li>
<li>void(A) 运行表达式A，返回值为undefined</li>
<li>A,B 逗号运算符，依次运算表达式A和表达式B，后一个表达式B的结果（==优先级低于赋值==）</li>
</ul>
<hr>
<h3 id="8-数字的存储"><a href="#8-数字的存储" class="headerlink" title="8.数字的存储"></a>8.数字的存储</h3><h4 id="（1）问题？"><a href="#（1）问题？" class="headerlink" title="（1）问题？"></a>（1）问题？</h4><h5 id="1）js中小数运算精确吗？"><a href="#1）js中小数运算精确吗？" class="headerlink" title="1）js中小数运算精确吗？"></a>1）js中小数运算精确吗？</h5><ul>
<li>不一定<h5 id="2）js中整数运算精确吗？"><a href="#2）js中整数运算精确吗？" class="headerlink" title="2）js中整数运算精确吗？"></a>2）js中整数运算精确吗？</h5></li>
<li>不一定<h5 id="3）js中整数是连续的吗？"><a href="#3）js中整数是连续的吗？" class="headerlink" title="3）js中整数是连续的吗？"></a>3）js中整数是连续的吗？</h5></li>
<li>不是<h5 id="4）js中最大的连续整数？"><a href="#4）js中最大的连续整数？" class="headerlink" title="4）js中最大的连续整数？"></a>4）js中最大的连续整数？</h5></li>
<li>Number.MAX_SAFE_INTEGER</li>
<li>9007199254740991<h5 id="5）js中表示数字的有效位数？"><a href="#5）js中表示数字的有效位数？" class="headerlink" title="5）js中表示数字的有效位数？"></a>5）js中表示数字的有效位数？</h5></li>
<li>16~17位</li>
</ul>
<h4 id="（2）解决"><a href="#（2）解决" class="headerlink" title="（2）解决"></a>（2）解决</h4><p><strong>二进制双精度64位存储标准</strong></p>
<ul>
<li>第一位表示符号<ul>
<li>0 表示正数</li>
<li>1 表示负数</li>
</ul>
</li>
<li>2~12位表示指数</li>
<li>后53位表示小数</li>
</ul>
<h4 id="（3）位运算"><a href="#（3）位运算" class="headerlink" title="（3）位运算"></a>（3）位运算</h4><p><strong>将数字取整按32位二进制存储</strong></p>
<ul>
<li><strong>位与 &amp;</strong><ul>
<li>每一位进行比较，如果都为1，结果为1，否则为0</li>
</ul>
</li>
<li><strong>位或 |</strong><ul>
<li>每一位进行比较，如果都为0，结果为0，否则为1</li>
</ul>
</li>
<li><strong>位非 ~</strong><ul>
<li>每一位进行取反，如果为0，结果为1，如果为1，结果为0</li>
<li>NaN、Infinity、-Infinity都看作0</li>
<li>==- 数字 -1==</li>
<li><blockquote>
<p>~2</p>
</blockquote>
</li>
<li><blockquote>
<p>-2-1</p>
</blockquote>
</li>
<li><blockquote>
<p>-3</p>
</blockquote>
</li>
</ul>
</li>
<li><strong>位异或 ^</strong> <ul>
<li>每一位进行比较，相同为0，不同为1</li>
</ul>
</li>
<li><strong>左位移 &lt;&lt;</strong><ul>
<li>整体向左移动指定位数</li>
<li>x &lt;&lt; n 相当于 x * 2的n次方</li>
</ul>
</li>
<li><strong>右位移 &gt;&gt;</strong><ul>
<li>整体向右移动指定位数</li>
<li>x &gt;&gt; n 相当于 x / 2的n次方</li>
</ul>
</li>
</ul>
<hr>
<h2 id="四、流程控制"><a href="#四、流程控制" class="headerlink" title="四、流程控制"></a>四、流程控制</h2><h3 id="（一）流程图"><a href="#（一）流程图" class="headerlink" title="（一）流程图"></a>（一）流程图</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">graph TD</span><br><span class="line">style st fill:lightblue;</span><br><span class="line">style ed fill:lightblue;</span><br><span class="line">style do fill:lightblue;</span><br><span class="line">style in fill:lightblue;</span><br><span class="line">style if fill:lightblue;</span><br><span class="line">st(圆角矩形)</span><br><span class="line">ed((圆形))</span><br><span class="line">do[矩形]</span><br><span class="line">in&gt;旗帜形]</span><br><span class="line">if&#123;菱形&#125;</span><br></pre></td></tr></table></figure>

<h3 id="（二）if判断"><a href="#（二）if判断" class="headerlink" title="（二）if判断"></a>（二）if判断</h3><h4 id="1-语法"><a href="#1-语法" class="headerlink" title="1.语法"></a>1.语法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>()&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>()&#123;&#125;<span class="keyword">else</span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>()&#123;&#125;<span class="keyword">else</span> <span class="keyword">if</span>()&#123;&#125;<span class="keyword">else</span>&#123;&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<ul>
<li>一条if判断语句中：<ul>
<li>if块只能出现一个</li>
<li>else if块可以出现多个（包括0个）</li>
<li>else块只能出现0个或一个</li>
</ul>
</li>
</ul>
<h4 id="2-执行顺序"><a href="#2-执行顺序" class="headerlink" title="2.执行顺序"></a>2.执行顺序</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件<span class="number">1</span>)&#123;A&#125;</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">2</span>)&#123;B&#125;</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">3</span>)&#123;C&#125;</span><br><span class="line"><span class="keyword">else</span>&#123;D&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>代码从上到下依次进行：<ul>
<li>如果满足条件1，执行A代码块，后面的直接忽略，语句结束</li>
<li>如果不满足条件1，忽略A代码块，看条件2</li>
<li>如果满足条件2，执行B代码块，后面的直接忽略，语句结束</li>
<li>如果不满足条件2，忽略B代码块，看条件3</li>
<li>如果满足条件3，执行C代码块，后面的直接忽略，语句结束</li>
<li>如果不满足条件3，忽略C代码块，执行D代码块，语句结束</li>
</ul>
</li>
</ul>
<h3 id="（三）switch开关"><a href="#（三）switch开关" class="headerlink" title="（三）switch开关"></a>（三）switch开关</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span>(n)&#123;</span><br><span class="line">  <span class="keyword">case</span> a: A; <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> b: B; <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> c: C; <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">default</span>: D; <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>代码从上到下依次进行：<ul>
<li>如果n === a，执行A代码块，后面的直接忽略，语句结束</li>
<li>如果n !== a，忽略A代码块，看条件n和b</li>
<li>如果n === b，执行B代码块，后面的直接忽略，语句结束</li>
<li>如果n !== b，忽略B代码块，看条件n和c</li>
<li>如果n === c，执行C代码块，后面的直接忽略，语句结束</li>
<li>如果n !== c，执行D代码块，语句结束</li>
</ul>
</li>
</ul>
<h3 id="（四）while循环"><a href="#（四）while循环" class="headerlink" title="（四）while循环"></a>（四）while循环</h3><h4 id="1-while"><a href="#1-while" class="headerlink" title="1.while(){}"></a>1.while(){}</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span>(条件)&#123;</span><br><span class="line">  执行</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>判断条件<ul>
<li>条件满足，执行循环体，然后继续判断条件—循环</li>
<li>条件不满足，语句结束</li>
</ul>
</li>
</ul>
<h4 id="2-do-while"><a href="#2-do-while" class="headerlink" title="2.do{}while()"></a>2.do{}while()</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">do</span>&#123;</span><br><span class="line">  执行</span><br><span class="line">&#125;<span class="keyword">while</span>(条件)</span><br></pre></td></tr></table></figure>
<ul>
<li>执行循环体</li>
<li>判断条件<ul>
<li>条件满足，执行循环体，然后继续判断条件—循环</li>
<li>条件不满足，语句结束</li>
</ul>
</li>
</ul>
<h3 id="（五）for循环"><a href="#（五）for循环" class="headerlink" title="（五）for循环"></a>（五）for循环</h3><h4 id="1-语法-1"><a href="#1-语法-1" class="headerlink" title="1.语法"></a>1.语法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(初始化表达式A; 条件B; 条件改变表达式C)&#123;</span><br><span class="line">    循环体D</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(初始化表达式A; 条件B; )&#123;</span><br><span class="line">    循环体D;</span><br><span class="line">    条件改变表达式C;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">初始化表达式A;</span><br><span class="line"><span class="keyword">for</span>( ; 条件B; )&#123;</span><br><span class="line">    循环体D;</span><br><span class="line">    条件改变表达式C;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h4 id="2-执行顺序-1"><a href="#2-执行顺序-1" class="headerlink" title="2.执行顺序"></a>2.执行顺序</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(初始化表达式A; 条件B; 条件改变表达式C)&#123;</span><br><span class="line">    循环体D</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>初始化表达式A</li>
<li>判断条件B，如果条件成立<ul>
<li>执行循环体D</li>
<li>条件改变表达式C</li>
<li>判断条件B—循环</li>
</ul>
</li>
<li>判断条件B，如果条件不成立<ul>
<li>循环结束</li>
</ul>
</li>
</ul>
<h4 id="3-关键字"><a href="#3-关键字" class="headerlink" title="3.关键字"></a>3.关键字</h4><ul>
<li>break 结束最近的循环</li>
<li>continue 终止当前循环体，进行下次循环</li>
</ul>
<hr>
<h2 id="五、数组"><a href="#五、数组" class="headerlink" title="五、数组"></a>五、数组</h2><h3 id="（一）创建"><a href="#（一）创建" class="headerlink" title="（一）创建"></a>（一）创建</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [item1, item2, ...]</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>(length)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>(item1, item2, ...)</span><br></pre></td></tr></table></figure>

<h3 id="（二）本质"><a href="#（二）本质" class="headerlink" title="（二）本质"></a>（二）本质</h3><ul>
<li>数组的本质是一个特殊的对象</li>
<li>数组访问使用下标（索引）属性表达式 arr[“0”] 或 arr[0]（数字会自动转换为字符串）</li>
<li>数组的下标正常情况下是连续的，从0开始到length-1</li>
<li>数组的length属性会自动变化，为最大下标+1</li>
<li>数组的length属性手动赋值，可能会导致数组截断（不建议使用）</li>
</ul>
<h3 id="（三）操作"><a href="#（三）操作" class="headerlink" title="（三）操作"></a>（三）操作</h3><h4 id="1-增"><a href="#1-增" class="headerlink" title="1.增"></a>1.增</h4><h5 id="（1）向数组末尾添加一项"><a href="#（1）向数组末尾添加一项" class="headerlink" title="（1）向数组末尾添加一项"></a>（1）向数组末尾添加一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr[arr.length] = 数据</span><br><span class="line"></span><br><span class="line">arr.push(数据)</span><br></pre></td></tr></table></figure>
<ul>
<li>arr[arr.length]可读性不强（不推荐）</li>
<li>可同时添加多项数据</li>
</ul>
<h5 id="（2）向数组开头添加一项"><a href="#（2）向数组开头添加一项" class="headerlink" title="（2）向数组开头添加一项"></a>（2）向数组开头添加一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.unshift(数据)</span><br></pre></td></tr></table></figure>
<ul>
<li>每一项的下标依次后移</li>
<li>可同时添加多项数据</li>
</ul>
<h5 id="（3）向数组指定位置添加一项"><a href="#（3）向数组指定位置添加一项" class="headerlink" title="（3）向数组指定位置添加一项"></a>（3）向数组指定位置添加一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.splice(index, <span class="number">0</span>, 数据)</span><br></pre></td></tr></table></figure>
<ul>
<li>从指定index位置开始，删除0项，然后在该位置插入数据</li>
<li>如果index超出范围，则按照数组范围的边界进行处理</li>
<li> 如果index是负数，则从数组末尾开始反计算</li>
</ul>
<hr>
<h4 id="2-删"><a href="#2-删" class="headerlink" title="2.删"></a>2.删</h4><h5 id="（1）删除数组最后一项"><a href="#（1）删除数组最后一项" class="headerlink" title="（1）删除数组最后一项"></a>（1）删除数组最后一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.pop()</span><br></pre></td></tr></table></figure>
<ul>
<li>一次只能删除一项</li>
<li>返回删除项（没有返回undefined）</li>
</ul>
<h5 id="（2）删除数组第一项"><a href="#（2）删除数组第一项" class="headerlink" title="（2）删除数组第一项"></a>（2）删除数组第一项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.shift()</span><br></pre></td></tr></table></figure>
<ul>
<li>每一项的下标依次前移</li>
<li>一次只能删除一项</li>
<li>返回删除项（没有返回undefined）</li>
</ul>
<h5 id="（3）删除数组指定位置项"><a href="#（3）删除数组指定位置项" class="headerlink" title="（3）删除数组指定位置项"></a>（3）删除数组指定位置项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">delete</span> arr[index]</span><br><span class="line"></span><br><span class="line">arr.splice(index, n)</span><br></pre></td></tr></table></figure>
<ul>
<li>delete删除指定index位置的数据，会导致稀松数组（下标不连续，不利于遍历）</li>
<li>从数组index位置开始，删除n项，返回一个新数组，包含删除项（没有返回空数组）</li>
</ul>
<hr>
<h4 id="3-常用操作"><a href="#3-常用操作" class="headerlink" title="3.常用操作"></a>3.常用操作</h4><h5 id="（1）数组填充指定数据"><a href="#（1）数组填充指定数据" class="headerlink" title="（1）数组填充指定数据"></a>（1）数组填充指定数据</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.fill(数据, start, end)</span><br></pre></td></tr></table></figure>
<ul>
<li>如果start和end都不指定，则全部填充</li>
<li>如果end不指定，则从start开始，一直到结束</li>
</ul>
<h5 id="（2）克隆数组的指定片段"><a href="#（2）克隆数组的指定片段" class="headerlink" title="（2）克隆数组的指定片段"></a>（2）克隆数组的指定片段</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> newArr = arr.slice(start, end)</span><br></pre></td></tr></table></figure>
<ul>
<li>如果start和end都不指定，则全部克隆</li>
<li>如果end不指定，则从start开始，一直到结束</li>
<li>不影响原数组</li>
</ul>
<h5 id="（3）数组清空"><a href="#（3）数组清空" class="headerlink" title="（3）数组清空"></a>（3）数组清空</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr.length = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">0</span>, arr.length)</span><br></pre></td></tr></table></figure>

<h5 id="（4）检索指定数据的下标"><a href="#（4）检索指定数据的下标" class="headerlink" title="（4）检索指定数据的下标"></a>（4）检索指定数据的下标</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.indexOf(数据)</span><br></pre></td></tr></table></figure>
<ul>
<li>返回第一个检索到的下标</li>
<li>没有返回-1</li>
<li>严格执行===</li>
<li>lastIndexOf() 逆序检索</li>
</ul>
<h5 id="（5）in关键字"><a href="#（5）in关键字" class="headerlink" title="（5）in关键字"></a>（5）in关键字</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">a <span class="keyword">in</span> obj</span><br><span class="line">b <span class="keyword">in</span> arr</span><br></pre></td></tr></table></figure>
<ul>
<li>检索obj中有没有a属性</li>
<li>检索arr中有没有a索引</li>
<li>检索到返回true，否则返回false</li>
</ul>
<h5 id="（6）for-in循环"><a href="#（6）for-in循环" class="headerlink" title="（6）for-in循环"></a>（6）for-in循环</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> prop <span class="keyword">in</span> obj)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(obj[prop]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> index <span class="keyword">in</span> arr)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(arr[index]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>依次遍历obj的属性，将属性名赋值给prop变量，执行循环体（遍历对象）</li>
<li>依次遍历arr的下标，将下标赋值给index变量，执行循环体（遍历数组）</li>
<li>==for循环与for-in循环的区别==<ul>
<li>for循环，会把稀松数组的每一项都遍历到</li>
<li>for-in循环，稀松数组的空项不会遍历到</li>
</ul>
</li>
</ul>
<h5 id="（7）拼接数组项"><a href="#（7）拼接数组项" class="headerlink" title="（7）拼接数组项"></a>（7）拼接数组项</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.join(分隔符) </span><br></pre></td></tr></table></figure>
<ul>
<li>拼接数组每一项，每一项之间用指定分隔符连接，返回字符串</li>
<li>若分隔符未指定，默认为逗号</li>
</ul>
<h5 id="（8）拼接数组"><a href="#（8）拼接数组" class="headerlink" title="（8）拼接数组"></a>（8）拼接数组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="keyword">new</span> arr = arr1.concat(arr2)</span><br></pre></td></tr></table></figure>
<ul>
<li>将arr1和arr2拼接成一个新数组并返回</li>
<li>不会影响原数组</li>
</ul>
<h4 id="4-二维数组"><a href="#4-二维数组" class="headerlink" title="4.二维数组"></a>4.二维数组</h4><ul>
<li>数组的每一项又是一个数组</li>
</ul>
<hr>
<h2 id="六、函数"><a href="#六、函数" class="headerlink" title="六、函数"></a>六、函数</h2><h3 id="（一）语法"><a href="#（一）语法" class="headerlink" title="（一）语法"></a>（一）语法</h3><h4 id="1-函数声明（字面量）"><a href="#1-函数声明（字面量）" class="headerlink" title="1.函数声明（字面量）"></a>1.函数声明（字面量）</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;<span class="keyword">return</span>&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>声明关键字function</li>
<li>函数名fn</li>
<li>参数列表()</li>
<li>函数体{}</li>
<li>返回值return</li>
</ul>
<h4 id="2-函数调用"><a href="#2-函数调用" class="headerlink" title="2.函数调用"></a>2.函数调用</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fn()</span><br></pre></td></tr></table></figure>
<ul>
<li>函数名</li>
<li>执行操作符()</li>
</ul>
<h4 id="3-函数声明提升"><a href="#3-函数声明提升" class="headerlink" title="3.函数声明提升"></a>3.函数声明提升</h4><ul>
<li>与变量声明提升一样</li>
<li>函数字面量声明会将函数名提升至脚本快顶部</li>
<li>通过字面量声明的函数将会成为全局对象的属性</li>
</ul>
<h4 id="4-局部变量"><a href="#4-局部变量" class="headerlink" title="4.局部变量"></a>4.局部变量</h4><ul>
<li>在函数体内用var关键字声明的变量为局部变量</li>
<li>在函数体内直接给一个未声明的变量赋值，此变量会成为全局变量</li>
<li>局部变量声明会提升至函数顶部，函数外部不可见</li>
</ul>
<h4 id="5-参数"><a href="#5-参数" class="headerlink" title="5.参数"></a>5.参数</h4><ul>
<li>功能实现的未知条件为参数</li>
<li>形参：在函数声明时在（）内定义参数</li>
<li>实参：在函数调用时通过（）实现给函数形参对应传递参数</li>
<li>参数的作用域为局部作用域，只在函数体内可见</li>
<li>没有实参对应的形参为undefined</li>
</ul>
<h4 id="6-返回值"><a href="#6-返回值" class="headerlink" title="6.返回值"></a>6.返回值</h4><ul>
<li>函数执行后返回一个结果为返回值</li>
<li>返回值可以自定义</li>
<li>return之后函数即结束，会忽略return语句之后的其它语句</li>
<li>如果函数没有自定义return语句，则会默认返回undefined</li>
</ul>
<h4 id="7-文档注释"><a href="#7-文档注释" class="headerlink" title="7.文档注释"></a>7.文档注释</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 变量：说明</span></span><br><span class="line"><span class="comment"> * 函数：说明</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param<span class="type">&#123;类型&#125;</span></span>a 参数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@returns<span class="type">&#123;类型&#125;</span></span>b 返回值</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>
<ul>
<li>文档注释不会执行</li>
<li>文档注释可以很好的给变量、函数进行说明，在使用时能给予使用者做很好的提示</li>
</ul>
<hr>
<h3 id="（二）特性"><a href="#（二）特性" class="headerlink" title="（二）特性"></a>（二）特性</h3><h4 id="1-作用域"><a href="#1-作用域" class="headerlink" title="1.作用域"></a>1.作用域</h4><h5 id="（1）全局作用域"><a href="#（1）全局作用域" class="headerlink" title="（1）全局作用域"></a>（1）全局作用域</h5><ul>
<li>在全局作用域中声明的变量会被提升到脚本块的顶部，并且会成为全局对象的属性</li>
<li>全局作用域中只能使用全局变量（函数）</li>
</ul>
<h5 id="（2）局部作用域（函数作用域）"><a href="#（2）局部作用域（函数作用域）" class="headerlink" title="（2）局部作用域（函数作用域）"></a>（2）局部作用域（函数作用域）</h5><ul>
<li>在局部作用域中声明的变量会被提升到函数的顶部，并且不会成为全局对象的属性</li>
<li>局部变量不会污染全局变量</li>
<li>局部作用域不仅可以使用内部变量（函数），还可以使用外部环境的变量（函数）</li>
<li>==当内部变量和外部变量冲突时，使用内部变量==</li>
</ul>
<h5 id="（3）闭包-closure"><a href="#（3）闭包-closure" class="headerlink" title="（3）闭包 closure"></a>（3）闭包 closure</h5><ul>
<li>闭包是一种现象，内部函数可以使用外部环境的变量</li>
</ul>
<h4 id="2-函数表达式"><a href="#2-函数表达式" class="headerlink" title="2.函数表达式"></a>2.函数表达式</h4><h5 id="1-立即执行函数"><a href="#1-立即执行函数" class="headerlink" title="(1)立即执行函数"></a>(1)立即执行函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;&#125;)();</span><br></pre></td></tr></table></figure>
<ul>
<li>==当函数成为一个表达式时，既不会提升，也不会污染全局对象==</li>
<li>将函数变成函数表达式之一的方法是用小括号将函数括起来，但是声明即结束，之后无法调用</li>
<li>将这种形式的函数表达式返回函数本身，即可以加执行符号立即执行，称之为<strong>立即执行函数 IIFE</strong></li>
<li>第一个小括号将函数变成表达式，返回函数本身</li>
<li>第二个小括号将函数立即执行，返回执行结果</li>
</ul>
<h5 id="2-匿名函数"><a href="#2-匿名函数" class="headerlink" title="(2)匿名函数"></a>(2)匿名函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;&#125;)();</span><br></pre></td></tr></table></figure>
<ul>
<li>函数表达式的函数名没有意义，可以省略，称之为<strong>匿名函数</strong></li>
</ul>
<h5 id="3-函数引用"><a href="#3-函数引用" class="headerlink" title="(3)函数引用"></a>(3)函数引用</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">fn</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;]</span><br></pre></td></tr></table></figure>
<ul>
<li>函数也是一种引用数据，可以赋值给变量/属性</li>
<li>变量保存的是对函数的地址引用</li>
</ul>
<h5 id="4-回调函数"><a href="#4-回调函数" class="headerlink" title="(4)回调函数"></a>(4)回调函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn1 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> fn2 = <span class="function"><span class="keyword">function</span> (<span class="params">call</span>)</span>&#123;call()&#125;;</span><br><span class="line"></span><br><span class="line">fn2(fn1)</span><br></pre></td></tr></table></figure>
<ul>
<li>将函数做为参数传递给另一个函数使用，称之为<strong>回调函数</strong></li>
</ul>
<h4 id="3-this关键字"><a href="#3-this关键字" class="headerlink" title="3.this关键字"></a>3.this关键字</h4><ul>
<li>在全局环境作用域中，this指代全局对象</li>
<li>在函数作用域中<ul>
<li>直接调用：this指代全局对象</li>
<li>对象调用：this指代调用对象</li>
</ul>
</li>
</ul>
<hr>
<h3 id="（三）构造函数"><a href="#（三）构造函数" class="headerlink" title="（三）构造函数"></a>（三）构造函数</h3><h4 id="1-普通函数创建对象"><a href="#1-普通函数创建对象" class="headerlink" title="1.普通函数创建对象"></a>1.普通函数创建对象</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">CreateUser</span>(<span class="params">name, age</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    name,</span><br><span class="line">    age,</span><br><span class="line">    <span class="function"><span class="title">say</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`我的名字是<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>岁`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> user1 = CreateUser(<span class="string">&quot;huafu&quot;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> user2 = CreateUser(<span class="string">&quot;zhang&quot;</span>, <span class="number">40</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>用函数创建对象可以减少繁琐的对象创建流程</li>
<li>函数可以返回任意的返回值，可用于返回一个对象</li>
</ul>
<h4 id="2-构造函数"><a href="#2-构造函数" class="headerlink" title="2.构造函数"></a>2.构造函数</h4><h5 id="（1）语法"><a href="#（1）语法" class="headerlink" title="（1）语法"></a>（1）语法</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">User</span>(<span class="params">name, age</span>)</span>&#123;</span><br><span class="line">  <span class="comment">// this = &#123;&#125;</span></span><br><span class="line">  <span class="built_in">this</span>.name = name;</span><br><span class="line">  <span class="built_in">this</span>.age = age;</span><br><span class="line">  <span class="built_in">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`我的名字是<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>岁`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// return this</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> user1 = <span class="keyword">new</span> User(<span class="string">&quot;huafu&quot;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> user2 = <span class="keyword">new</span> User(<span class="string">&quot;zhang&quot;</span>, <span class="number">40</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>构造函数命名规约：大驼峰、尽量不使用动词</li>
<li>new关键字来调用构造函数创建对象</li>
<li>this默认指向新创建的对象</li>
</ul>
<h5 id="（2）返回值"><a href="#（2）返回值" class="headerlink" title="（2）返回值"></a>（2）返回值</h5><ul>
<li>默认隐式返回一个新对象</li>
<li>如果显式返回值<ul>
<li>返回值是原始类型：直接忽略，默认返回</li>
<li>返回值是引用类型：覆盖默认返回</li>
</ul>
</li>
</ul>
<h5 id="（3）原理"><a href="#（3）原理" class="headerlink" title="（3）原理"></a>（3）原理</h5><ul>
<li>第一步隐式创建了this = {}; </li>
<li>最后一步隐式返回了this这个对象</li>
</ul>
<h5 id="（4）new-target"><a href="#（4）new-target" class="headerlink" title="（4）new.target"></a>（4）new.target</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">User</span>(<span class="params">name, age</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">new</span>.target === User)&#123;</span><br><span class="line">    <span class="comment">// this = &#123;&#125;</span></span><br><span class="line">    <span class="built_in">this</span>.name = name;</span><br><span class="line">    <span class="built_in">this</span>.age = age;</span><br><span class="line">    <span class="built_in">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`我的名字是<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>岁`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// return this</span></span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      name,</span><br><span class="line">      age,</span><br><span class="line">      <span class="function"><span class="title">say</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`我的名字是<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>岁`</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> user1 = <span class="keyword">new</span> User(<span class="string">&quot;huafu&quot;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> user2 = User(<span class="string">&quot;zhang&quot;</span>, <span class="number">40</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>构造函数通过new调用，new.target指向构造函数本身</li>
<li>构造函数没通过new调用，new.target为undefined</li>
</ul>
<hr>
<h3 id="（四）本质"><a href="#（四）本质" class="headerlink" title="（四）本质"></a>（四）本质</h3><h4 id="1-函数的本质就是对象"><a href="#1-函数的本质就是对象" class="headerlink" title="1.函数的本质就是对象"></a>1.函数的本质就是对象</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">a, b</span>)</span>&#123;<span class="keyword">return</span> a + b&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> sum = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">&quot;a&quot;</span>, <span class="string">&quot;b&quot;</span>, <span class="string">&quot;return a + b&quot;</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>所有的对象都是通过构造函数创建的，使用new关键字</li>
<li>函数的本质就是对象，自然也是构造函数创建，可以使用new操作符</li>
<li>实际上，所有的函数都是构造函数创建的</li>
<li>这样构造函数是js引擎启动时就已经创建好</li>
<li>new Function()创建的是函数</li>
<li>new 自定义函数()创建的是对象</li>
</ul>
<h4 id="2-函数的属性"><a href="#2-函数的属性" class="headerlink" title="2.函数的属性"></a>2.函数的属性</h4><ul>
<li>函数的本质是对象，自然也可以拥有属性</li>
</ul>
<h4 id="3-包装类"><a href="#3-包装类" class="headerlink" title="3.包装类"></a>3.包装类</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">123</span>;</span><br><span class="line">a = <span class="number">3.14159</span>;</span><br><span class="line">a.toFixed(<span class="number">2</span>);   <span class="comment">// (new Number(a)).toFixed(2)</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Boolean</span></span><br><span class="line"><span class="built_in">String</span></span><br><span class="line"><span class="built_in">Number</span></span><br></pre></td></tr></table></figure>
<ul>
<li>js为了增强原始类型的功能，为boolean、string、number分别创建了一个构造函数</li>
<li>如果语法上，将原始类型当做对象使用（一般是使用属性），js会自动的在该位置利用对应的构造函数，创建对象来访问原始类型的属性</li>
<li>在js中类就相当于构造函数</li>
<li>成员/实例方法（属性）：通过构造函数创建的对象调用</li>
<li>静态/类方法（属性）：通过构造函数调用</li>
</ul>
<hr>
<h3 id="（五）递归"><a href="#（五）递归" class="headerlink" title="（五）递归"></a>（五）递归</h3><h4 id="1-概念-1"><a href="#1-概念-1" class="headerlink" title="1.概念"></a>1.概念</h4><ul>
<li>在函数内部直接或间接调用自身</li>
</ul>
<h4 id="2-执行栈"><a href="#2-执行栈" class="headerlink" title="2.执行栈"></a>2.执行栈</h4><ul>
<li>任何代码的执行都必须有一个执行环境，执行环境为代码的执行提供支持</li>
<li>执行环境会放到执行栈中</li>
<li>函数每次执行都会创建一个新的执行环境，执行完毕即销毁</li>
<li>执行栈的空间大小有限，执行环境过多可能导致执行栈溢出</li>
</ul>
<h4 id="3-无限递归与死循环"><a href="#3-无限递归与死循环" class="headerlink" title="3.无限递归与死循环"></a>3.无限递归与死循环</h4><ul>
<li>无限递归，函数每次调用都会产生新环境，所以会导致栈溢出报错</li>
<li>死循环每次循环并不会产生新环境，也不会导致栈溢出，会导致卡死</li>
</ul>
<h4 id="4-尾递归"><a href="#4-尾递归" class="headerlink" title="4.尾递归"></a>4.尾递归</h4><ul>
<li>如果一个函数最后一条语句是调用函数，并且调用函数不是表达式的一部分，则该语句称之为尾调用，如若尾调用是调用函数自身称之为尾递归</li>
<li>某些语言或执行环境会对尾调用进行优化，它们会理解销毁当前函数，避免执行栈空间被占用</li>
<li>在浏览器环境中没有优化</li>
<li>在node环境中有优化</li>
</ul>
<hr>
<h2 id="七、标准库"><a href="#七、标准库" class="headerlink" title="七、标准库"></a>七、标准库</h2><h3 id="（一）Object（构造函数）"><a href="#（一）Object（构造函数）" class="headerlink" title="（一）Object（构造函数）"></a>（一）Object（构造函数）</h3><h4 id="1-静态成员"><a href="#1-静态成员" class="headerlink" title="1.静态成员"></a>1.静态成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Object.keys(obj)</strong></td>
<td align="left">方法</td>
<td align="left">{Object}</td>
<td align="left">可枚举的属性</td>
<td align="left">{Array&lt;string&gt;}</td>
</tr>
<tr>
<td align="left"><strong>Object.values(obj)</strong></td>
<td align="left">方法</td>
<td align="left">{Object}</td>
<td align="left">可枚举的属性值</td>
<td align="left">{Array&lt;T&gt;}</td>
</tr>
<tr>
<td align="left"><strong>Object.entries(obj)</strong></td>
<td align="left">方法</td>
<td align="left">{Object}</td>
<td align="left">可枚举的属性/属性值</td>
<td align="left">{Array&lt;Array&gt;}</td>
</tr>
</tbody></table>
<h4 id="2-实例成员"><a href="#2-实例成员" class="headerlink" title="2.实例成员"></a>2.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>obj.toString()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">转换为字符串</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>obj.valueOf()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">返回自身</td>
<td align="left">{Object}</td>
</tr>
</tbody></table>
<ul>
<li>实例成员可重写属性或方法</li>
<li>自动类型转换的本质<ul>
<li>先调用valueOf()得到结果<ul>
<li>如果结果是原始类型，则该结果就是最终结果</li>
<li>如果结果是引用类型，则该结果再调用toString()得到最终结果</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h3 id="（二）Function（构造函数）"><a href="#（二）Function（构造函数）" class="headerlink" title="（二）Function（构造函数）"></a>（二）Function（构造函数）</h3><h4 id="1-特性"><a href="#1-特性" class="headerlink" title="1.特性"></a>1.特性</h4><ul>
<li>所有函数都具有Function中的实例成员</li>
<li>arguments（==类数组==）在函数中使用，得到函数调用时的实参列表</li>
<li>arguments 会与实参列表一一映射（一个改变对应另一个也改变）</li>
</ul>
<h4 id="2-实例成员-1"><a href="#2-实例成员-1" class="headerlink" title="2.实例成员"></a>2.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>fn.length</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">获取形参数量</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>fn.call()</strong></td>
<td align="left">方法</td>
<td align="left">{obj, Array&lt;T&gt;}</td>
<td align="left">临时改变this指向，调用函数</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>fn.apply()</strong></td>
<td align="left">方法</td>
<td align="left">{obj, T}</td>
<td align="left">临时改变this指向，调用函数</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>fn.bind()</strong></td>
<td align="left">方法</td>
<td align="left">{obj, T}</td>
<td align="left">永久绑定this指向，不调用函数，返回新函数</td>
<td align="left">{Function}</td>
</tr>
</tbody></table>
<hr>
<h3 id="（三）Array（构造函数）"><a href="#（三）Array（构造函数）" class="headerlink" title="（三）Array（构造函数）"></a>（三）Array（构造函数）</h3><h4 id="1-静态成员-1"><a href="#1-静态成员-1" class="headerlink" title="1.静态成员"></a>1.静态成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Array.form()</strong></td>
<td align="left">方法</td>
<td align="left">{类数组}</td>
<td align="left">将类数组转换为数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>Array.isArray()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">判定数组</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>Array.of()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">用指定数据创建数组</td>
<td align="left">{Array}</td>
</tr>
</tbody></table>
<h4 id="2-实例成员-2"><a href="#2-实例成员-2" class="headerlink" title="2.实例成员"></a>2.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>arr.fill()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start, end}</td>
<td align="left">用指定数据填充数组，返回当前数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.slice()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start, end}</td>
<td align="left">复制指定的数组片段，返回新数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.pop()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">删除数组尾项，返回删除项</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>arr.shift()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">删除数组首项，返回删除项</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>arr.push()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">在数组尾部添加数据，返回当前数组新length</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.unshift()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">在数组首部添加数据，返回当前数组新length</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.reverse()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">将数组颠倒顺序，返回当前数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.sort()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(a, b){}}</td>
<td align="left">对数组进行排序/乱序，返回当前数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.concat()</strong></td>
<td align="left">方法</td>
<td align="left">{Array}</td>
<td align="left">对数组进行合并，返回新数组</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.includes()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start}</td>
<td align="left">查询指定数据（严格相等）,返回true/false</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>arr.indexOf()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start}</td>
<td align="left">顺序查询指定数据（严格相等）,返回index</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.lastIndexOf()</strong></td>
<td align="left">方法</td>
<td align="left">{T, start}</td>
<td align="left">逆序查询指定数据（严格相等）,返回index</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.join()</strong></td>
<td align="left">方法</td>
<td align="left">{连接符}</td>
<td align="left">将数组项以指定连接符进行拼接成字符串并返回</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>arr.forEach()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">遍历数组</td>
<td align="left">{undefined}</td>
</tr>
<tr>
<td align="left"><strong>arr.every()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">遍历数组，是否每一项都满足条件</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>arr.some()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">遍历数组，是否有一项满足条件</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>arr.filter()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">遍历数组，筛选满足条件的所有元素并返回</td>
<td align="left">{Array}</td>
</tr>
<tr>
<td align="left"><strong>arr.find()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">顺序查询满足条件的第一个元素并返回</td>
<td align="left">{T}</td>
</tr>
<tr>
<td align="left"><strong>arr.findIndex()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">顺序查询满足条件的第一个元素的下标并返回</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>arr.map()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(item, index, arr){}}</td>
<td align="left">将数组每一项映射成为指定条件的数据并返回</td>
<td align="left">{Array&lt;Object&gt;}</td>
</tr>
<tr>
<td align="left"><strong>arr.reduce()</strong></td>
<td align="left">方法</td>
<td align="left">{fn(a, b){}, first}</td>
<td align="left">将数组每两项为一个结果进行累计迭代并返回最后一次迭代的结果</td>
<td align="left">{T}</td>
</tr>
</tbody></table>
<hr>
<h3 id="（四）Number（构造函数）"><a href="#（四）Number（构造函数）" class="headerlink" title="（四）Number（构造函数）"></a>（四）Number（构造函数）</h3><h4 id="1-特性-1"><a href="#1-特性-1" class="headerlink" title="1.特性"></a>1.特性</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Number</span>()</span><br><span class="line"></span><br><span class="line"><span class="built_in">Number</span>()</span><br></pre></td></tr></table></figure>
<ul>
<li>类型转换</li>
<li>用new调用返回对象</li>
<li>直接调用返回的是原始值</li>
</ul>
<h4 id="2-静态成员"><a href="#2-静态成员" class="headerlink" title="2.静态成员"></a>2.静态成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Number.isNaN()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">判定NaN</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>Number.isFinite()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">判定Infinity</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>Number.isInteger()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">判定整数</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>Number.parseInt()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">转化为整数</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Number.parseFloat()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">转换为小数</td>
<td align="left">{number}</td>
</tr>
</tbody></table>
<ul>
<li>parseInt参数为字符串，若不是字符串，会先转换为字符串，再进行转换为整数</li>
<li>parseInt从左往右看从第一个有效数字开始到第一个非有效数字字符结束，忽略两边的空白字符，直接舍弃小数部分，转换不了返回NaN</li>
<li>parseInt可选第二位参数，用于指定参数的进制（2-32），参数与进制不符，会取开端符合进制的部分，舍弃不符部分，取不到则返回NaN</li>
<li>parseInt的返回值为十进制</li>
</ul>
<h4 id="3-实例成员"><a href="#3-实例成员" class="headerlink" title="3.实例成员"></a>3.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>num.toFixed()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">保留指定小数位数，返回数字字符串（四舍五入）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>num.toPrecision()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">保留指定精度，返回数字字符串</td>
<td align="left">{string}</td>
</tr>
</tbody></table>
<hr>
<h3 id="（五）Boolean（构造函数）"><a href="#（五）Boolean（构造函数）" class="headerlink" title="（五）Boolean（构造函数）"></a>（五）Boolean（构造函数）</h3><ul>
<li>0、””、false、undefined、null、NaN 判定为假</li>
<li>其它判定为真 Boolean(“false”) ==&gt; true</li>
</ul>
<hr>
<h3 id="（六）String（构造函数）"><a href="#（六）String（构造函数）" class="headerlink" title="（六）String（构造函数）"></a>（六）String（构造函数）</h3><h4 id="1-静态成员-2"><a href="#1-静态成员-2" class="headerlink" title="1.静态成员"></a>1.静态成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>String.fromCharCode()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">用Unicode编码创建字符</td>
<td align="left">{string}</td>
</tr>
</tbody></table>
<ul>
<li>参数取值范围0-65535</li>
<li>infinity返回” “;</li>
</ul>
<h4 id="2-实例成员-3"><a href="#2-实例成员-3" class="headerlink" title="2.实例成员"></a>2.实例成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>str.length</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">字符串长度（字符个数）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.charAt()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">取得指定位置的字符</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.charCodeAt()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">取得指定位置的字符的Unicode码</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.concat()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">字符串拼接</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.includes()</strong></td>
<td align="left">方法</td>
<td align="left">{string, start}</td>
<td align="left">检索字符串中是否包含指定字符串</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>str.startsWith()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">检索字符串中是以指定字符串开始</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>str.endsWith()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">检索字符串中是以指定字符串结尾</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>str.indexOf()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">检索字符串中指定字符串首次出现索引</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.lastIndexOf()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">检索字符串中指定字符串末次出现索引</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.padStart()</strong></td>
<td align="left">方法</td>
<td align="left">{length, string}</td>
<td align="left">填充字符串至指定长度（首部填充）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.padEnd()</strong></td>
<td align="left">方法</td>
<td align="left">{length, string}</td>
<td align="left">填充字符串至指定长度（末部填充）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.repeat()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">重复字符串</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.slice()</strong></td>
<td align="left">方法</td>
<td align="left">{start, end}</td>
<td align="left">复制字符串片段（从某个位置取到某个位置）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.substr()</strong></td>
<td align="left">方法</td>
<td align="left">{start, length}</td>
<td align="left">复制字符串片段（从某个位置开始取指定长度）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.substring()</strong></td>
<td align="left">方法</td>
<td align="left">{start, end}</td>
<td align="left">复制字符串片段（从某个位置取到某个位置）</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.toLowerCase()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">字符串转换为小写</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.toUpperCase()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">字符串转换为大写</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.trim()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">忽略字符串两端空格</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.trimStart()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">忽略字符串开端空格</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.trimEnd()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">忽略字符串末端空格</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>str.split()</strong></td>
<td align="left">方法</td>
<td align="left">{T}</td>
<td align="left">将字符串以分隔符拆分成数组</td>
<td align="left">{Array}</td>
</tr>
</tbody></table>
<ul>
<li>字符串是==类数组==</li>
<li>charAt(index) 和 [index]取得指定索引的字符</li>
<li>charAt(index) 中index超出范围返回””;</li>
<li>数组中index超出范围返回undefined</li>
<li>slice、substr参数可为负数，负数时，倒序计算；参数位置不可换</li>
<li>substring参数不可为负数，否则自动转换为0；参数位置可换</li>
</ul>
<hr>
<h3 id="（七）Math（对象）"><a href="#（七）Math（对象）" class="headerlink" title="（七）Math（对象）"></a>（七）Math（对象）</h3><h4 id="1-常量"><a href="#1-常量" class="headerlink" title="1.常量"></a>1.常量</h4><ul>
<li>永远不会变化的数据</li>
<li>命名规约：所有字母大写，多单词下划线连接</li>
</ul>
<h4 id="2-对象成员"><a href="#2-对象成员" class="headerlink" title="2.对象成员"></a>2.对象成员</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Math.PI</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">圆周率</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.abs()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">绝对值</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.floor()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">向下取整</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.ceil()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">向上取整</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.round()</strong></td>
<td align="left">方法</td>
<td align="left">{number}</td>
<td align="left">四舍五入</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.max()</strong></td>
<td align="left">方法</td>
<td align="left">{number…}</td>
<td align="left">最大值</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.min()</strong></td>
<td align="left">方法</td>
<td align="left">{number…}</td>
<td align="left">最小值</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>Math.random()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">伪随机数</td>
<td align="left">{number}</td>
</tr>
</tbody></table>
<hr>
<h3 id="（八）Date（构造函数）"><a href="#（八）Date（构造函数）" class="headerlink" title="（八）Date（构造函数）"></a>（八）Date（构造函数）</h3><h4 id="1-术语"><a href="#1-术语" class="headerlink" title="1.术语"></a>1.术语</h4><h5 id="（1）时间单位"><a href="#（1）时间单位" class="headerlink" title="（1）时间单位"></a>（1）时间单位</h5><ul>
<li>年：year</li>
<li>月：month</li>
<li>日：date</li>
<li>小时：hour</li>
<li>分钟：minute</li>
<li>秒钟：second</li>
<li>毫秒：millisecond</li>
<li>微妙：microsecond</li>
<li>纳秒：nanosecond</li>
</ul>
<h5 id="（2）UTC和GMT"><a href="#（2）UTC和GMT" class="headerlink" title="（2）UTC和GMT"></a>（2）UTC和GMT</h5><ul>
<li>UTC：世界协调时（原子时，精确到纳秒）</li>
<li>GMT：格林威治世界时（太阳时，精确毫秒）</li>
<li>UTC与GMT时差不超过0.9秒，UTF自动校正</li>
</ul>
<h5 id="（3）时间戳"><a href="#（3）时间戳" class="headerlink" title="（3）时间戳"></a>（3）时间戳</h5><ul>
<li>1970年1月1日0时0分0秒0毫秒起（GMT）</li>
<li>到某个时间所经过的毫秒数</li>
</ul>
<h4 id="2-创建"><a href="#2-创建" class="headerlink" title="2.创建"></a>2.创建</h4><ul>
<li>Date() 直接调用，会忽略参数，返回当前系统时间</li>
<li>new Data()创建日期对象<ul>
<li>一个参数：时间戳</li>
<li>多个参数：年、月、日、时、分、秒、毫秒</li>
</ul>
</li>
</ul>
<h4 id="3-实例成员-1"><a href="#3-实例成员-1" class="headerlink" title="3.实例成员"></a>3.实例成员</h4><h5 id="（1）获取"><a href="#（1）获取" class="headerlink" title="（1）获取"></a>（1）获取</h5><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>d.getTime()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取时间戳</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getFullYear()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取年</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getmonth()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取月（0-11）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getDay()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取周（0-6）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getDate()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取日</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getHours()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取时）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getMinutes()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取分）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.getSeconds()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">获取秒</td>
<td align="left">{number}</td>
</tr>
</tbody></table>
<h5 id="（2）设置"><a href="#（2）设置" class="headerlink" title="（2）设置"></a>（2）设置</h5><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>d.setTime()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置时间戳</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setFullYear()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置年</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setmonth()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置月（0-11）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setDay()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置周（0-6）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setDate()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置日</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setHours()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置时）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setMinutes()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置分）</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>d.setSeconds()</strong></td>
<td align="left">方法</td>
<td align="left">——</td>
<td align="left">重置秒</td>
<td align="left">{number}</td>
</tr>
</tbody></table>
<h4 id="4-日期运算"><a href="#4-日期运算" class="headerlink" title="4.日期运算"></a>4.日期运算</h4><ul>
<li>重写了Object中的valueOf方法，返回的是一个数字类型的时间戳</li>
</ul>
<hr>
<h3 id="（九）RegExp（构造函数）"><a href="#（九）RegExp（构造函数）" class="headerlink" title="（九）RegExp（构造函数）"></a>（九）RegExp（构造函数）</h3><h4 id="1-字符"><a href="#1-字符" class="headerlink" title="1.字符"></a>1.字符</h4><h5 id="（1）字面量"><a href="#（1）字面量" class="headerlink" title="（1）字面量"></a>（1）字面量</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">/.../ 匹配直接书写的字符</span><br><span class="line">/ABC/ 匹配ABC字符</span><br></pre></td></tr></table></figure>
<h5 id="（2）特殊字符"><a href="#（2）特殊字符" class="headerlink" title="（2）特殊字符"></a>（2）特殊字符</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /^/ 开始</span><br><span class="line">        /$/ 结束</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /./ 任意字符</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /\n/  n是特殊字符（将特殊字符转换为普通字符）</span><br></pre></td></tr></table></figure>
<h5 id="（3）转义字符"><a href="#（3）转义字符" class="headerlink" title="（3）转义字符"></a>（3）转义字符</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /\n/  换行符</span><br><span class="line">        /\t/  制表符</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /\s/  空白字符</span><br><span class="line">        /\S/  非空白字符</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /\b/  单词边界</span><br><span class="line">        /\B/  非单词边界</span><br><span class="line"></span><br><span class="line">（<span class="number">4</span>）   /\d/  数字[<span class="number">0</span>-<span class="number">9</span>]</span><br><span class="line">        /\D/  非数字[^<span class="number">0</span>-<span class="number">9</span>]</span><br><span class="line"></span><br><span class="line">（<span class="number">5</span>）   /\w/  字母、数字、下划线[A-Za_z0-9_]</span><br><span class="line">        /\W/  非字母、数字、下划线[^A-Za_z0-9_]</span><br><span class="line"></span><br><span class="line">（<span class="number">6</span>）   /\un/ n是四位十六进制的Unicode码</span><br></pre></td></tr></table></figure>
<h5 id="（4）字符集"><a href="#（4）字符集" class="headerlink" title="（4）字符集"></a>（4）字符集</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">/[ABC]/  匹配ABC中任意一位</span><br><span class="line">/[<span class="number">0</span>-<span class="number">9</span>]/  匹配任意一位字符</span><br><span class="line">/^[<span class="number">0</span>-<span class="number">9</span>]/  必须以一位数字开始</span><br><span class="line">/[^<span class="number">0</span>-<span class="number">9</span>]/  非数字</span><br><span class="line">/[\u4E00-\u9FA5]/ 匹配任意一位中文（除生僻字）</span><br></pre></td></tr></table></figure>

<h4 id="2-量词"><a href="#2-量词" class="headerlink" title="2.量词"></a>2.量词</h4><h5 id="（1）特殊字符"><a href="#（1）特殊字符" class="headerlink" title="（1）特殊字符"></a>（1）特殊字符</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /[...]*/ <span class="number">0</span>或多个</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /[...]+/ <span class="number">1</span>或多个</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /[...]?/ <span class="number">0</span>或<span class="number">1</span>个</span><br></pre></td></tr></table></figure>
<h5 id="（2）自定义量词"><a href="#（2）自定义量词" class="headerlink" title="（2）自定义量词"></a>（2）自定义量词</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /[...]&#123;n&#125;/ n个</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /[...]&#123;n,&#125;/ 至少n个</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /[...]&#123;n,m&#125;/ n到m个</span><br></pre></td></tr></table></figure>

<h4 id="3-符号"><a href="#3-符号" class="headerlink" title="3.符号"></a>3.符号</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">1</span>）   /|/ 或者</span><br><span class="line"></span><br><span class="line">（<span class="number">2</span>）   /()/ 子集（捕获组）</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /[]/ 字符集</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>）   /&#123;&#125;/ 自定义量词</span><br></pre></td></tr></table></figure>

<h4 id="4-创建"><a href="#4-创建" class="headerlink" title="4.创建"></a>4.创建</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/规则/</span>flag</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(规则, flag)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg = <span class="built_in">RegExp</span>(规则, flag)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>reg = /规则/<br>reg1 = new RegExp(reg)<br>reg2 = RegExp(reg)</p>
</blockquote>
<ul>
<li>当用一个正则作为参数创建正则时，用不用new就会有区别<ul>
<li>reg1 === reg ==&gt; false</li>
<li>reg2 === reg ==&gt; true</li>
</ul>
</li>
<li>flag<ul>
<li>g 全局匹配</li>
<li>i 忽略大小写</li>
<li>m 多行匹配</li>
</ul>
</li>
</ul>
<hr>
<h4 id="5-实例成员"><a href="#5-实例成员" class="headerlink" title="5.实例成员"></a>5.实例成员</h4><h5 id="（1）正则"><a href="#（1）正则" class="headerlink" title="（1）正则"></a>（1）正则</h5><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>reg.global</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">是否开启全局</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>reg.ignoreCase</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">是否开启忽略大小写</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>reg.multiline</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">是否开启多行</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>reg.source</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">当前规则</td>
<td align="left">{string}</td>
</tr>
<tr>
<td align="left"><strong>reg.lastIndex</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">匹配位置</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>reg.test()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">是否匹配到</td>
<td align="left">{boolean}</td>
</tr>
<tr>
<td align="left"><strong>reg.exec()</strong></td>
<td align="left">方法</td>
<td align="left">{string}</td>
<td align="left">匹配到的结果</td>
<td align="left">{Array&lt;string&gt;}</td>
</tr>
</tbody></table>
<ul>
<li>test当开启全局匹配的时候受lastIndex属性控制匹配位置</li>
<li>exec当开启全局匹配的时候受lastIndex属性控制匹配位置<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;aaa&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/a+/g</span>;   贪婪模式 ==&gt; <span class="string">&quot;aaa&quot;</span></span><br><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/a+?/g</span>;  非贪婪模式 ==&gt; <span class="string">&quot;a&quot;</span></span><br></pre></td></tr></table></figure></li>
<li>默认匹配模式为贪婪模式（尽可能的多），在量词后加？更改为非贪婪模式</li>
</ul>
<hr>
<h5 id="（2）字符串"><a href="#（2）字符串" class="headerlink" title="（2）字符串"></a>（2）字符串</h5><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>str.search()</strong></td>
<td align="left">方法</td>
<td align="left">{RegExp}</td>
<td align="left">第一次匹配到的index</td>
<td align="left">{number}</td>
</tr>
<tr>
<td align="left"><strong>str.match()</strong></td>
<td align="left">方法</td>
<td align="left">{RegExp}</td>
<td align="left">匹配到的结果</td>
<td align="left">{Array&lt;string&gt;}</td>
</tr>
<tr>
<td align="left"><strong>str.split()</strong></td>
<td align="left">方法</td>
<td align="left">{RegExp}</td>
<td align="left">按正则分隔字符串</td>
<td align="left">{Array&lt;string&gt;}</td>
</tr>
<tr>
<td align="left"><strong>str.replace()</strong></td>
<td align="left">方法</td>
<td align="left">{RegExp, string|function}</td>
<td align="left">按正则替换指定字符并返回新字符串</td>
<td align="left">{string}</td>
</tr>
</tbody></table>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;hello world&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr = str.replace(<span class="regexp">/\s*\b[a-z]\s*/g</span>, <span class="function"><span class="keyword">function</span>(<span class="params">match</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> match.toUpperCase().trim();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>replace替换可以使用函数<ul>
<li>match为匹配到的内容</li>
<li>return返回值为替换的内容</li>
</ul>
</li>
</ul>
<hr>
<h4 id="6-捕获组"><a href="#6-捕获组" class="headerlink" title="6.捕获组"></a>6.捕获组</h4><h5 id="（1）匿名捕获组"><a href="#（1）匿名捕获组" class="headerlink" title="（1）匿名捕获组"></a>（1）匿名捕获组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/(《[\u4e00-\u9fa5]+》)[\u4e00-\u9fa5]+(\d&#123;4&#125;年\d&#123;1,2&#125;月\d&#123;1,2&#125;日)[\u4e00-\u9fa5]+/gim</span>;</span><br><span class="line"></span><br><span class="line">reg.exec(str) ==&gt; </span><br><span class="line"></span><br><span class="line"><span class="number">0</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行&quot;</span></span><br><span class="line"><span class="number">1</span>: <span class="string">&quot;《中华人民共和国安全生产法》&quot;</span></span><br><span class="line"><span class="number">2</span>: <span class="string">&quot;2002年11月1日&quot;</span></span><br><span class="line"><span class="attr">groups</span>: <span class="literal">undefined</span></span><br><span class="line"><span class="attr">index</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">input</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="attr">length</span>: <span class="number">3</span></span><br></pre></td></tr></table></figure>
<ul>
<li>一个()代表一个捕获组，从左往右一次计算（例子中有2个捕获组）</li>
<li>当()发生嵌套的时候，从左往右，从外层往内层计算</li>
<li>匹配的结果返回的数组中，从index[1]位开始一次对应捕获组匹配的子集<ul>
<li>[0]代表匹配到的结果</li>
<li>[1]代表从左往右第一个()捕获组的内容</li>
<li>[2]代表从左往右第二个()捕获组的内容</li>
</ul>
</li>
</ul>
<h5 id="（2）具名捕获组"><a href="#（2）具名捕获组" class="headerlink" title="（2）具名捕获组"></a>（2）具名捕获组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/(?&lt;name&gt;《[\u4e00-\u9fa5]+》)[\u4e00-\u9fa5]+(?&lt;time&gt;\d&#123;4&#125;年\d&#123;1,2&#125;月\d&#123;1,2&#125;日)[\u4e00-\u9fa5]+/gim</span>;</span><br><span class="line"></span><br><span class="line">reg.exec(str) ==&gt; </span><br><span class="line"></span><br><span class="line"><span class="number">0</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行&quot;</span></span><br><span class="line"><span class="number">1</span>: <span class="string">&quot;《中华人民共和国安全生产法》&quot;</span></span><br><span class="line"><span class="number">2</span>: <span class="string">&quot;2002年11月1日&quot;</span></span><br><span class="line"><span class="attr">groups</span>: &#123;<span class="attr">name</span>: <span class="string">&quot;《中华人民共和国安全生产法》&quot;</span>, <span class="attr">time</span>: <span class="string">&quot;2002年11月1日&quot;</span>&#125;</span><br><span class="line"><span class="attr">index</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">input</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="attr">length</span>: <span class="number">3</span></span><br></pre></td></tr></table></figure>
<ul>
<li>一个()代表一个捕获组，以 ==<strong>（ ？&lt;name&gt;</strong>== 的形式给当前()捕获组命名</li>
<li>具名捕获组会对应到返回结果的数组属性groups对象中<ul>
<li>命名为属性名</li>
<li>捕获组内容为属性值</li>
</ul>
</li>
</ul>
<h5 id="（3）非捕获组"><a href="#（3）非捕获组" class="headerlink" title="（3）非捕获组"></a>（3）非捕获组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/(?:《[\u4e00-\u9fa5]+》)[\u4e00-\u9fa5]+(?&lt;time&gt;\d&#123;4&#125;年\d&#123;1,2&#125;月\d&#123;1,2&#125;日)[\u4e00-\u9fa5]+/gim</span>;</span><br><span class="line"></span><br><span class="line">reg.exec(str) ==&gt; </span><br><span class="line"></span><br><span class="line"><span class="number">0</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行&quot;</span></span><br><span class="line"><span class="number">1</span>: <span class="string">&quot;2002年11月1日&quot;</span></span><br><span class="line"><span class="attr">groups</span>: &#123;<span class="attr">time</span>: <span class="string">&quot;2002年11月1日&quot;</span>&#125;</span><br><span class="line"><span class="attr">index</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">input</span>: <span class="string">&quot;《中华人民共和国安全生产法》自2002年11月1日起施行。&quot;</span></span><br><span class="line"><span class="attr">length</span>: <span class="number">3</span></span><br></pre></td></tr></table></figure>
<ul>
<li>一个()代表一个捕获组，以 ==<strong>（ ？：</strong>== 的形式设定当前()为非捕获组</li>
<li>非捕获组不会再捕获子集，节约性能</li>
</ul>
<h5 id="（4）replace运用捕获组"><a href="#（4）replace运用捕获组" class="headerlink" title="（4）replace运用捕获组"></a>（4）replace运用捕获组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">str.replace(reg, <span class="function"><span class="keyword">function</span>(<span class="params">match, g1, g2</span>)</span>&#123;&#125;)</span><br><span class="line"></span><br><span class="line">str.replace(reg, <span class="string">&quot;$1/$2&quot;</span>)</span><br></pre></td></tr></table></figure>
<ul>
<li>replace替换可以使用函数,函数第二个参数开始对应捕获组<ul>
<li>match为匹配到的内容</li>
<li>g1为第一个捕获组的内容</li>
<li>g2为第二个捕获组的内容</li>
<li>return返回值为替换的内容</li>
</ul>
</li>
<li>replace替换可以使用字符串,字符串中的特殊字符$1、$2…对应捕获组<ul>
<li>$1为第一个捕获组的内容</li>
<li>$2为第二个捕获组的内容</li>
</ul>
</li>
</ul>
<h5 id="（5）反向引用"><a href="#（5）反向引用" class="headerlink" title="（5）反向引用"></a>（5）反向引用</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/(1&#123;2&#125;)(a&#123;2&#125;)\1/</span>; ==&gt; 11aa11</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg2 = <span class="regexp">/(1&#123;2&#125;)(a&#123;2&#125;)\2/</span>; ==&gt; 11aaaa</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<ul>
<li>在正则表达式中，匿名捕获组以 ==<strong>\n</strong>== 的形式对()捕获组进行引用，n代表要引用第几个捕获组<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/(?&lt;num1&gt;1&#123;2&#125;)(?&lt;num2&gt;a&#123;2&#125;)\k&lt;num1&gt;/</span>; ==&gt; 11aa11</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg2 = <span class="regexp">/(?&lt;num1&gt;1&#123;2&#125;)(?&lt;num2&gt;a&#123;2&#125;)\k&lt;num2&gt;/</span>; ==&gt; 11aaaa</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li>在正则表达式中，具名捕获组以 ==<strong>\k&lt;name&gt;</strong>== 的形式对()捕获组进行引用，name代表要引用的捕获组名称</li>
</ul>
<h4 id="7-断言-预查"><a href="#7-断言-预查" class="headerlink" title="7.断言/预查"></a>7.断言/预查</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/[a-z](?=\d+)/g</span>; ==&gt; ab11 ==&gt; b</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/[a-z](?!=\d+)/g</span>; ==&gt; ab11 ==&gt; a</span><br></pre></td></tr></table></figure>
<ul>
<li>在正则表达式中，以 ==<strong>（ ？=规则）</strong>== 的形式对匹配进行正向预查</li>
<li>在正则表达式中，以 ==<strong>（ ？！=规则）</strong>== 的形式对匹配进行负向预查</li>
<li>此形式的()不会成为捕获组，亦不会成为匹配结果的一部分</li>
<li>reg1匹配一个小写字母，且要满足后面跟随的是数字</li>
<li>reg2匹配一个小写字母，且要满足后面跟随的不是数字<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;1234567890&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/\B(?=(\d&#123;3&#125;)+$)/g</span>;</span><br><span class="line"><span class="keyword">var</span> s = str.replace(reg, <span class="string">&quot;,&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(s); ==&gt; <span class="string">&quot;1,234,567,890&quot;</span></span><br></pre></td></tr></table></figure></li>
<li>钱数表示法<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;aA123.10&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&amp;*()&lt;&gt;+-/.]).&#123;6,8&#125;$/</span>;</span><br><span class="line"><span class="keyword">var</span> resault = reg.test(str);</span><br><span class="line"><span class="built_in">console</span>.log(resault);</span><br></pre></td></tr></table></figure></li>
<li>密码强度检查<ul>
<li>(?=.*[a-z]) 有没有包含一个小写字母</li>
<li>(?=.*[A-Z]) 有没有包含一个大写字母</li>
<li>(?=.*\d) 有没有包含一个数字</li>
<li>(?=.*[!@#$%^&amp;*()&lt;&gt;+-/.]) 有没有包含一个特殊字符</li>
</ul>
</li>
<li>==预查不会消耗字符，预查完后匹配位置依然从0开始==</li>
</ul>
<hr>
<h3 id="（十）Error（构造函数）"><a href="#（十）Error（构造函数）" class="headerlink" title="（十）Error（构造函数）"></a>（十）Error（构造函数）</h3><h4 id="1-错误类型"><a href="#1-错误类型" class="headerlink" title="1.错误类型"></a>1.错误类型</h4><ul>
<li>语法错误：导致当前脚本块不执行</li>
<li>运行错误<ul>
<li>运行报错：导致当前脚本块后续代码不执行</li>
<li>运行结果不符合预期</li>
</ul>
</li>
</ul>
<h4 id="2-调试错误"><a href="#2-调试错误" class="headerlink" title="2.调试错误"></a>2.调试错误</h4><ul>
<li>控制台打印</li>
<li>断点调试（Chrome）</li>
</ul>
<h4 id="3-抛出错误"><a href="#3-抛出错误" class="headerlink" title="3.抛出错误"></a>3.抛出错误</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> e = <span class="keyword">new</span> <span class="built_in">Error</span>(msg);</span><br><span class="line"></span><br><span class="line"><span class="keyword">throw</span> e;</span><br></pre></td></tr></table></figure>

<h4 id="4-错误家族"><a href="#4-错误家族" class="headerlink" title="4.错误家族"></a>4.错误家族</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Error()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>SyntaxError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">语法错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>TypeError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">类型错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>ReferenceError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">引用错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>RangeError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">越界错误</td>
<td align="left">{Error}</td>
</tr>
<tr>
<td align="left"><strong>URLError()</strong></td>
<td align="left">构造函数</td>
<td align="left">{T}</td>
<td align="left">路径错误</td>
<td align="left">{Error}</td>
</tr>
</tbody></table>
<h4 id="5-捕获错误"><a href="#5-捕获错误" class="headerlink" title="5.捕获错误"></a>5.捕获错误</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span>&#123;</span><br><span class="line">  <span class="comment">//错误捕获区</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">catch</span>(e)&#123;</span><br><span class="line">  <span class="comment">//错误处理区</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">finally</span>&#123;</span><br><span class="line">  <span class="comment">//最终执行区</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="八、DOM核心"><a href="#八、DOM核心" class="headerlink" title="八、DOM核心"></a>八、DOM核心</h2><h3 id="（一）获取"><a href="#（一）获取" class="headerlink" title="（一）获取"></a>（一）获取</h3><h4 id="1-获取DOM节点"><a href="#1-获取DOM节点" class="headerlink" title="1.获取DOM节点"></a>1.获取DOM节点</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
<th align="left">兼容性</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>document.documentElement</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">html节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.head</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">head节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.body</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">body节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.links</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">超链接节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.anchors</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">锚链接（name属性）节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.forms</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">form节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.getElementById()</strong></td>
<td align="left">方法</td>
<td align="left">{string/ID属性值}</td>
<td align="left">id属性节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.getElementsByTagName()</strong></td>
<td align="left">方法</td>
<td align="left">{string/元素名}</td>
<td align="left">元素节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.getElementsByName()</strong></td>
<td align="left">方法</td>
<td align="left">{string/name属性值}</td>
<td align="left">name属性节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>document.getElementsByClassName()</strong></td>
<td align="left">方法</td>
<td align="left">{string/class属性值}</td>
<td align="left">class属性节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
<tr>
<td align="left"><strong>document.querySelector()</strong></td>
<td align="left">方法</td>
<td align="left">{string/css选择器}</td>
<td align="left">class属性节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE8及以上</td>
</tr>
<tr>
<td align="left"><strong>document.querySelectorAll()</strong></td>
<td align="left">方法</td>
<td align="left">{string/css选择器}</td>
<td align="left">class属性节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">IE8及以上</td>
</tr>
</tbody></table>
<ul>
<li>querySelectorAll()获取的是静态快照，其它的均是实时更新的</li>
<li>定义ID属性的DOM节点会成为window对象的属性，它是一个实时的单对象，会与同名全局变量冲突</li>
<li>getElementsByTagName()/getElementsByClassName()/querySelector()/querySelectorAll()在元素节点上均有定义</li>
</ul>
<h4 id="2-节点关系"><a href="#2-节点关系" class="headerlink" title="2.节点关系"></a>2.节点关系</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
<th align="left">兼容性</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>node.parentNode</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">父节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.previousSibling</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">前兄弟节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.nextSibling</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">后兄弟节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.childNodes</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">子节点</td>
<td align="left">{Array&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.firstChild</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">第一个子节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.lastChild</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">第一个子节点</td>
<td align="left">{Object&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>node.attributes</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">属性节点</td>
<td align="left">{Array&lt;Node&gt;}</td>
<td align="left">——</td>
</tr>
</tbody></table>
<h4 id="3-元素关系"><a href="#3-元素关系" class="headerlink" title="3.元素关系"></a>3.元素关系</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
<th align="left">兼容性</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>ele.parentElement</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">父节点、父元素</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>ele.previousElementSibling</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">前兄弟节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
<tr>
<td align="left"><strong>ele.nextElementSibling</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">后兄弟节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
<tr>
<td align="left"><strong>ele.children</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">子节点</td>
<td align="left">{Array&lt;DOM&gt;}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>ele.firstElementChild</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">第一个子节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
<tr>
<td align="left"><strong>ele.lastElementChild</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">第一个子节点</td>
<td align="left">{Object&lt;DOM&gt;}</td>
<td align="left">IE9及以上</td>
</tr>
</tbody></table>
<h4 id="4-节点属性"><a href="#4-节点属性" class="headerlink" title="4.节点属性"></a>4.节点属性</h4><table>
<thead>
<tr>
<th align="left">API</th>
<th align="left">类型</th>
<th align="left">参数</th>
<th align="left">作用/返回值</th>
<th align="left">返回值类型</th>
<th align="left">兼容性</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>dom.nodeName</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">节点名</td>
<td align="left">{STRING}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>dom.tagName</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">元素名</td>
<td align="left">{STRING}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>dom.nodeValue</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">节点内容</td>
<td align="left">{string}</td>
<td align="left">——</td>
</tr>
<tr>
<td align="left"><strong>dom.nodeType</strong></td>
<td align="left">属性</td>
<td align="left">——</td>
<td align="left">节点类型</td>
<td align="left">{number}</td>
<td align="left">——</td>
</tr>
</tbody></table>
<hr>
<h3 id="（二）操作"><a href="#（二）操作" class="headerlink" title="（二）操作"></a>（二）操作</h3><h4 id="1-操作DOM属性"><a href="#1-操作DOM属性" class="headerlink" title="1.操作DOM属性"></a>1.操作DOM属性</h4><h5 id="（1）可识别属性（HTML正常属性）"><a href="#（1）可识别属性（HTML正常属性）" class="headerlink" title="（1）可识别属性（HTML正常属性）"></a>（1）可识别属性（HTML正常属性）</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">div.id</span><br><span class="line">div.className</span><br><span class="line">label.htmlFor</span><br><span class="line">input.value = <span class="string">&quot;请输入内容&quot;</span>;</span><br><span class="line">img.src = <span class="string">&quot;./1.jpg&quot;</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>正常的属性即使没有赋值也有默认值</li>
<li>布尔属性获取的是Boolean值，并非原始书写值</li>
<li>正常的属性名与关键字/保留字冲突时，修改属性名</li>
<li>有些HTML元素并不存在的属性也可以正常使用</li>
</ul>
<h5 id="（2）自定义属性"><a href="#（2）自定义属性" class="headerlink" title="（2）自定义属性"></a>（2）自定义属性</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">abc</span>=<span class="string">&quot;123&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">data-abc</span>=<span class="string">&quot;123&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">div.getAttribute(<span class="string">&quot;abc&quot;</span>);</span><br><span class="line">div.setAttribute(<span class="string">&quot;abc&quot;</span>, <span class="string">&quot;123&quot;</span>)</span><br><span class="line">div.removeAttribute(<span class="string">&quot;abc&quot;</span>);</span><br><span class="line"></span><br><span class="line">div.dataset.abc;</span><br><span class="line">div.dataset.abc = <span class="string">&quot;123&quot;</span>;</span><br><span class="line"><span class="keyword">delete</span> div.dataset.abc;</span><br></pre></td></tr></table></figure>

<h4 id="2-操作DOM内容"><a href="#2-操作DOM内容" class="headerlink" title="2.操作DOM内容"></a>2.操作DOM内容</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">div.innerHtml</span><br><span class="line">div.innerHtml = <span class="string">&quot;&lt;p&gt;段落&lt;/p&gt;&quot;</span></span><br><span class="line"></span><br><span class="line">p.innerText</span><br><span class="line">p.innerText = <span class="string">&quot;段落&quot;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>innerHtml可识别HTML元素内容</li>
<li>innerText可见并且显示的纯文本内容，有兼容性问题</li>
<li>textContent源代码纯文本内容，有兼容性问题</li>
</ul>
<h4 id="3-操作DOM结构"><a href="#3-操作DOM结构" class="headerlink" title="3.操作DOM结构"></a>3.操作DOM结构</h4><h5 id="（1）操作页面元素对象"><a href="#（1）操作页面元素对象" class="headerlink" title="（1）操作页面元素对象"></a>（1）操作页面元素对象</h5><ul>
<li><strong>A父元素.appendChild(元素1)</strong><ul>
<li>将元素1剪切，追加到A元素的最后一个子元素位置</li>
</ul>
</li>
<li><strong>A父元素.append(元素1、2、3…)</strong><ul>
<li>将元素1、2、3剪切，依次追加到A元素的最后一个子元素位置</li>
</ul>
</li>
<li><strong>A父元素.insertBefore(元素1，子元素a)</strong><ul>
<li>将元素1剪切，插入到A元素的子元素a前面的位置</li>
</ul>
</li>
<li><strong>A父元素.insertBefore(元素1，子元素a.nextElementSibling)</strong><ul>
<li>将元素1剪切，插入到A元素的子元素a后面的位置</li>
</ul>
</li>
<li><strong>A父元素.replaceChild(元素1，子元素a)</strong><ul>
<li>将元素1剪切，替换掉A元素的子元素a的位置</li>
</ul>
</li>
</ul>
<h5 id="（2）创建新元素对象"><a href="#（2）创建新元素对象" class="headerlink" title="（2）创建新元素对象"></a>（2）创建新元素对象</h5><ul>
<li><strong>document.createElement(元素名)</strong> 创建元素</li>
<li><strong>document.createDocumentFragment()</strong> 创建文档片段</li>
</ul>
<h5 id="（3）克隆页面元素对象"><a href="#（3）克隆页面元素对象" class="headerlink" title="（3）克隆页面元素对象"></a>（3）克隆页面元素对象</h5><ul>
<li><strong>dom.cloneNode(是否深度克隆)</strong> 克隆元素</li>
<li>浅克隆：仅仅克隆自身</li>
<li>深克隆：克隆自身包含所有子元素及后代</li>
</ul>
<h5 id="（4）删除页面元素对象"><a href="#（4）删除页面元素对象" class="headerlink" title="（4）删除页面元素对象"></a>（4）删除页面元素对象</h5><ul>
<li><strong>A父元素.removeChild(子元素a)</strong> 谋杀</li>
<li><strong>子元素a.remove()</strong> 自杀</li>
</ul>
<h4 id="4-操作DOM样式"><a href="#4-操作DOM样式" class="headerlink" title="4.操作DOM样式"></a>4.操作DOM样式</h4><h5 id="（1）类样式"><a href="#（1）类样式" class="headerlink" title="（1）类样式"></a>（1）类样式</h5><ul>
<li><strong>dom.className</strong>：预先定义好css类样式，通过className改变类来对应实现类样式（兼容性好）</li>
<li><strong>dom.classList</strong>：预先定义好css类样式，通过classList.add/remove/contains/toggle方法来控制类（兼容性不好）</li>
</ul>
<h5 id="（2）样式属性"><a href="#（2）样式属性" class="headerlink" title="（2）样式属性"></a>（2）样式属性</h5><ul>
<li><strong>dom.style</strong>：行内样式对象</li>
<li>css-书写方式应转换为小驼峰书写方式</li>
<li>只能操作行内书写样式，得到的是声明值</li>
<li>==设置样式：只能设置行内样式==</li>
</ul>
<h5 id="（3）计算样式"><a href="#（3）计算样式" class="headerlink" title="（3）计算样式"></a>（3）计算样式</h5><ul>
<li>**window.getComputeStyle(dom, 伪元素)**： 获取计算样式对象</li>
<li>获取的是最终经过计算的绝对值</li>
</ul>
<hr>
<h3 id="（三）事件"><a href="#（三）事件" class="headerlink" title="（三）事件"></a>（三）事件</h3><h4 id="1-术语-1"><a href="#1-术语-1" class="headerlink" title="1.术语"></a>1.术语</h4><ul>
<li>事件：发生一件事</li>
<li>事件类型：事件发生的类型</li>
<li>事件处理程序：事件发生时，运行的函数</li>
<li>事件注册：将事件处理程序挂载到事件上</li>
<li>事件源：事件目标元素</li>
</ul>
<h4 id="2-事件流"><a href="#2-事件流" class="headerlink" title="2.事件流"></a>2.事件流</h4><ul>
<li>概念：某个事件发生时，哪些元素会监听到该事件，这些元素触发该事件的顺序</li>
<li>规则：当一个元素的事件发生时，其所有的祖先元素均发生了该事件（与元素结构有关，与视觉效果无关）</li>
<li>冒泡：事件从最里层事件源开始，依次向祖先元素传递</li>
<li>捕获：事件从最外层祖先元素开始，依次向事件源传递</li>
<li>顺序：事件捕获阶段 –&gt; 事件目标阶段 –&gt; 事件冒泡阶段</li>
<li>标准：默认事件冒泡</li>
</ul>
<h4 id="3-事件注册-注销"><a href="#3-事件注册-注销" class="headerlink" title="3.事件注册/注销"></a>3.事件注册/注销</h4><h5 id="（1）事件属性"><a href="#（1）事件属性" class="headerlink" title="（1）事件属性"></a>（1）事件属性</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div onclick=<span class="string">&quot;console.log(&quot;</span><span class="string">&quot;)&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">div.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">div.onclick = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>事件属性只能给同一事件类型注册一个事件处理程序</li>
</ul>
<h5 id="（2）事件注册方法"><a href="#（2）事件注册方法" class="headerlink" title="（2）事件注册方法"></a>（2）事件注册方法</h5><p><strong>标准</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">div.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="keyword">do</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">do</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line">div.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;, <span class="literal">false</span>)<span class="comment">//冒泡</span></span><br><span class="line">div.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;, <span class="literal">true</span>)<span class="comment">//捕获</span></span><br><span class="line"></span><br><span class="line">div.removeEventLister(<span class="string">&quot;click&quot;</span>, <span class="keyword">do</span>)</span><br></pre></td></tr></table></figure>
<ul>
<li>事件方法可以给同一事件类型注册多个事件处理程序，按照注册顺序依次执行</li>
<li>移除事件不能使用匿名函数</li>
<li>==可以用第三个参数==<ul>
<li>boolean 指定事件处理阶段,默认false：冒泡，true：捕获（对事件目标阶段的事件无效）</li>
<li>Object 配置属性capture默认false：冒泡，true：捕获/属性once默认false：执行多次，true：仅仅执行一次</li>
</ul>
</li>
</ul>
<p><strong>兼容</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">div.attachEvent(<span class="string">&quot;click&quot;</span>, <span class="keyword">do</span>)</span><br><span class="line">div.detachEvent(<span class="string">&quot;click&quot;</span>, <span class="keyword">do</span>)</span><br></pre></td></tr></table></figure>


<h4 id="4-事件对象"><a href="#4-事件对象" class="headerlink" title="4.事件对象"></a>4.事件对象</h4><h5 id="（1）获取-1"><a href="#（1）获取-1" class="headerlink" title="（1）获取"></a>（1）获取</h5><p><strong>标准</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">div.onclick = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>事件处理程序的第一个参数</li>
</ul>
<p><strong>兼容</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.event</span><br></pre></td></tr></table></figure>
<ul>
<li>全局属性event</li>
</ul>
<h5 id="（2）成员"><a href="#（2）成员" class="headerlink" title="（2）成员"></a>（2）成员</h5><ul>
<li><strong>事件源:</strong> <ul>
<li>标准e.target </li>
<li>兼容e.srcElement</li>
<li>事件委托：通过给父元素注册事件，通过事件源来实现子元素的事件处理</li>
</ul>
</li>
<li><strong>当前目标：</strong> e.currentTarget指代绑定事件的元素，与this等效</li>
<li><strong>事件类型：</strong> e.type</li>
<li><strong>阻止浏览器默认行为：</strong><ul>
<li>标准e.preventDefault()方法 </li>
<li>兼容e.returnValue属性默认true，更改为false</li>
<li>事件属性方式返回布尔值false</li>
<li>a元素href=”javascript:void(0)”</li>
</ul>
</li>
<li><strong>阻止冒泡：</strong><ul>
<li>标准e.stopPropagation()方法</li>
<li>兼容e.cancelBubble属性默认false，更改为true</li>
</ul>
</li>
<li><strong>处理阶段：</strong> e.eventPhase<ul>
<li>1 捕获</li>
<li>2 目标</li>
<li>3 冒泡</li>
</ul>
</li>
</ul>
<h5 id="（3）鼠标事件对象MouseEvent"><a href="#（3）鼠标事件对象MouseEvent" class="headerlink" title="（3）鼠标事件对象MouseEvent"></a>（3）鼠标事件对象MouseEvent</h5><ul>
<li><strong>辅助键</strong><ul>
<li>e.altKey:true/false 是否搭配使用了键盘alt辅助键</li>
<li>e.ctrlKey:true/false 是否搭配使用了键盘ctrl辅助键</li>
<li>e.shiftKey:true/false 是否搭配使用了键盘shift辅助键</li>
</ul>
</li>
<li><strong>使用键</strong><ul>
<li>e.button:0/1/2 使用的是左、中、右键（默认值为0）</li>
</ul>
</li>
<li><strong>位置</strong><ul>
<li>e.pageX 相对于页面left的横坐标</li>
<li>e.pageY 相对于页面top的纵坐标</li>
<li>e.clientX/e.x 相对于视口left的横坐标</li>
<li>e.clientY/e.y 相对于视口top的纵坐标</li>
<li>e.offsetX 相对于事件源填充盒left的横坐标</li>
<li>e.offsetY 相对于事件源填充盒top的纵坐标</li>
<li>e.screenX 相对于屏幕left的横坐标</li>
<li>e.screenY 相对于屏幕top的纵坐标</li>
<li>e.movementX 相对于鼠标上一次位置的横向偏移量</li>
<li>e.movementY 相对于鼠标上一次位置的纵向偏移量</li>
</ul>
</li>
</ul>
<h5 id="（4）键盘事件对象KeyboardEvent"><a href="#（4）键盘事件对象KeyboardEvent" class="headerlink" title="（4）键盘事件对象KeyboardEvent"></a>（4）键盘事件对象KeyboardEvent</h5><ul>
<li>e.code 按键字符串，适应键盘布局 KeyD</li>
<li>e.key 按键字符串，不适应键盘布局  d</li>
</ul>
<h5 id="（5）窗口事件对象"><a href="#（5）窗口事件对象" class="headerlink" title="（5）窗口事件对象"></a>（5）窗口事件对象</h5><ul>
<li>document.documentElement.scrollTop/scrollLeft 获取/设置网页滚动距离</li>
<li>dom.scrollTop/scrollLeft scrollTop/scrollLeft 获取/设置当前元素滚动距离</li>
<li>screen.width/height 屏幕尺寸</li>
<li>window.outerWidth/outerHeight 窗口外尺寸</li>
<li>window.innerWidth/innerHeight 窗口内尺寸（包含滚动条）</li>
<li>document.documentElement.clientWidth/clientHeight视口尺寸（不包含滚动条）</li>
<li>dom.clientWidth/clientHeight可视填充盒尺寸（不包含滚动条、边框）</li>
<li>dom.offsetWidth/offsetHeight可视元素尺寸（包含滚动条、边框）</li>
<li>dom.scrollWidth/scrollHeight实际内容尺寸（包含滚动条、边框）</li>
<li>dom.offsetParent 最近的祖先定位元素<ul>
<li>dom.offsetLeft 相对于e.offsetParent的横向偏移量</li>
<li>dom.offsetTop 相对于e.offsetParent的纵向偏移量</li>
</ul>
</li>
<li>dom.getBoundingClientRect()获取对象rect<ul>
<li>rect.left 相对于视口的横向偏移量</li>
<li>rect.top 相对于视口的纵向偏移量</li>
</ul>
</li>
<li>window.scrollTo(x, y) 定位到指定位置</li>
<li>window.scrollBy(x, y) 相对偏移量（递增、递减）</li>
</ul>
<h4 id="5-事件类型"><a href="#5-事件类型" class="headerlink" title="5.事件类型"></a>5.事件类型</h4><h5 id="（1）鼠标事件类型"><a href="#（1）鼠标事件类型" class="headerlink" title="（1）鼠标事件类型"></a>（1）鼠标事件类型</h5><table>
<thead>
<tr>
<th align="center">类型</th>
<th align="center">含义</th>
<th align="center">应用</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>click</strong></td>
<td align="center">鼠标点击事件</td>
<td align="center">一般是左键</td>
</tr>
<tr>
<td align="center"><strong>dblclick</strong></td>
<td align="center">鼠标双击事件</td>
<td align="center">一般是左键</td>
</tr>
<tr>
<td align="center"><strong>mousedown</strong></td>
<td align="center">鼠标按下事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>mouseup</strong></td>
<td align="center">鼠标抬起事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>mousemove</strong></td>
<td align="center">鼠标移动事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>mouseover</strong></td>
<td align="center">鼠标进入事件</td>
<td align="center">冒泡</td>
</tr>
<tr>
<td align="center"><strong>mouseout</strong></td>
<td align="center">鼠标离开事件</td>
<td align="center">冒泡</td>
</tr>
<tr>
<td align="center"><strong>mouseenter</strong></td>
<td align="center">鼠标进入事件</td>
<td align="center">不冒泡</td>
</tr>
<tr>
<td align="center"><strong>mouseleave</strong></td>
<td align="center">鼠标离开事件</td>
<td align="center">不冒泡</td>
</tr>
</tbody></table>
<ul>
<li>over/out不包含子元素，从父元素到子元素就算离开了父元素</li>
<li>enter/leave包含子元素，从父元素进入子元素仍然算在父元素中</li>
</ul>
<h5 id="（2）键盘事件类型"><a href="#（2）键盘事件类型" class="headerlink" title="（2）键盘事件类型"></a>（2）键盘事件类型</h5><table>
<thead>
<tr>
<th align="center">类型</th>
<th align="center">含义</th>
<th align="center">应用</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>keydown</strong></td>
<td align="center">键盘按下事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>keyup</strong></td>
<td align="center">键盘抬起事件</td>
<td align="center">——</td>
</tr>
<tr>
<td align="center"><strong>keypress</strong></td>
<td align="center">键盘字符按下事件</td>
<td align="center">只监听字符键</td>
</tr>
</tbody></table>
<ul>
<li>keydown / keypress如果阻止了默认行为则对应输入内容不会显示</li>
</ul>
<h5 id="3-表单事件类型"><a href="#3-表单事件类型" class="headerlink" title="(3)表单事件类型"></a>(3)表单事件类型</h5><table>
<thead>
<tr>
<th align="center">类型</th>
<th align="center">含义</th>
<th align="center">应用</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>focus</strong></td>
<td align="center">聚焦事件</td>
<td align="center">e.bubbles/false不会冒泡</td>
</tr>
<tr>
<td align="center"><strong>blur</strong></td>
<td align="center">失去焦点</td>
<td align="center">e.bubbles/false不会冒泡</td>
</tr>
<tr>
<td align="center"><strong>submit</strong></td>
<td align="center">提交事件</td>
<td align="center">e.bubbles/true会冒泡</td>
</tr>
<tr>
<td align="center"><strong>change</strong></td>
<td align="center">文本改变事件</td>
<td align="center">e.bubbles/true会冒泡</td>
</tr>
<tr>
<td align="center"><strong>input</strong></td>
<td align="center">输入事件</td>
<td align="center">e.bubbles/true会冒泡</td>
</tr>
</tbody></table>
<h5 id="（4）窗口事件类型"><a href="#（4）窗口事件类型" class="headerlink" title="（4）窗口事件类型"></a>（4）窗口事件类型</h5><table>
<thead>
<tr>
<th align="center">类型</th>
<th align="center">含义</th>
<th align="center">宿主</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>load</strong></td>
<td align="center">资源全部加载完毕</td>
<td align="center">window</td>
</tr>
<tr>
<td align="center"><strong>DOMContentLoaded</strong></td>
<td align="center">DOM树构建完毕</td>
<td align="center">document</td>
</tr>
<tr>
<td align="center"><strong>readystatechange</strong></td>
<td align="center">document.readyState改变</td>
<td align="center">document</td>
</tr>
<tr>
<td align="center"><strong>beforeunload</strong></td>
<td align="center">窗口关闭前</td>
<td align="center">window</td>
</tr>
<tr>
<td align="center"><strong>unload</strong></td>
<td align="center">窗口关闭</td>
<td align="center">window</td>
</tr>
<tr>
<td align="center"><strong>scroll</strong></td>
<td align="center">滚动条滚动</td>
<td align="center">*</td>
</tr>
<tr>
<td align="center"><strong>resize</strong></td>
<td align="center">视口尺寸改变</td>
<td align="center">window</td>
</tr>
<tr>
<td align="center"><strong>contextmenu</strong></td>
<td align="center">右键菜单</td>
<td align="center">*</td>
</tr>
<tr>
<td align="center"><strong>paste</strong></td>
<td align="center">粘贴</td>
<td align="center">*</td>
</tr>
<tr>
<td align="center"><strong>copy</strong></td>
<td align="center">复制</td>
<td align="center">*</td>
</tr>
<tr>
<td align="center"><strong>cut</strong></td>
<td align="center">剪切</td>
<td align="center">*</td>
</tr>
</tbody></table>
<h4 id="6-浏览器渲染"><a href="#6-浏览器渲染" class="headerlink" title="6.浏览器渲染"></a>6.浏览器渲染</h4><h5 id="（1）渲染顺序"><a href="#（1）渲染顺序" class="headerlink" title="（1）渲染顺序"></a>（1）渲染顺序</h5><ul>
<li>1.网络：获取页面源代码</li>
<li>2.创建：document文档节点</li>
<li>3.预渲染：<ul>
<li>源代码从上到下，依次构建dom树</li>
<li>遇到（link/script）外部资源默认同步加载，外部资源加载完即立即执行</li>
<li>遇到（img/video/audio）外部资源默认异步加载，外部资源加载完即立即执行</li>
</ul>
</li>
<li>4.按照DOM树依次渲染子节点</li>
</ul>
<h5 id="（2）document-readyState状态"><a href="#（2）document-readyState状态" class="headerlink" title="（2）document.readyState状态"></a>（2）document.readyState状态</h5><ul>
<li>loading 资源开始加载</li>
<li>interactive DOM树构建完成 触发DOMContentLoaded</li>
<li>complete 资源加载完毕 触发load</li>
</ul>
<h4 id="7-事件模拟"><a href="#7-事件模拟" class="headerlink" title="7.事件模拟"></a>7.事件模拟</h4><ul>
<li>dom.click() 手动触发click事件</li>
<li>dom.submit() 手动触发submit事件</li>
<li>其它事件模拟<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//自定义事件</span></span><br><span class="line"><span class="keyword">var</span> event = <span class="keyword">new</span> MouseEvent(<span class="string">&quot;事件类型&quot;</span>, &#123;配置&#125;)</span><br><span class="line"><span class="comment">//分发事件</span></span><br><span class="line">dom.dispatchEvent(event)</span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h2 id="九、BOM核心"><a href="#九、BOM核心" class="headerlink" title="九、BOM核心"></a>九、BOM核心</h2><h3 id="（一）计时器（异步）"><a href="#（一）计时器（异步）" class="headerlink" title="（一）计时器（异步）"></a>（一）计时器（异步）</h3><h4 id="1-Timeout"><a href="#1-Timeout" class="headerlink" title="1.Timeout"></a>1.Timeout</h4><h5 id="（1）setTimeout-fn-time"><a href="#（1）setTimeout-fn-time" class="headerlink" title="（1）setTimeout(fn, time)"></a>（1）setTimeout(fn, time)</h5><ul>
<li>返回计时器编号timer，等待time之后，运行fn</li>
<li>fn内的this指向window<h5 id="（2）clearTimeout-timer"><a href="#（2）clearTimeout-timer" class="headerlink" title="（2）clearTimeout(timer)"></a>（2）clearTimeout(timer)</h5></li>
<li>清除计时器</li>
</ul>
<h4 id="2-Interval"><a href="#2-Interval" class="headerlink" title="2.Interval"></a>2.Interval</h4><h5 id="（1）setInterval-fn-time"><a href="#（1）setInterval-fn-time" class="headerlink" title="（1）setInterval(fn, time)"></a>（1）setInterval(fn, time)</h5><ul>
<li>返回计时器编号timer，没间隔time，运行一次fn</li>
<li>fn内的this指向window<h5 id="（2）clearInterval-timer"><a href="#（2）clearInterval-timer" class="headerlink" title="（2）clearInterval(timer)"></a>（2）clearInterval(timer)</h5></li>
<li>清除计时器</li>
</ul>
<hr>
<h2 id="十、进阶"><a href="#十、进阶" class="headerlink" title="十、进阶"></a>十、进阶</h2><h3 id="（一）原型与原型链"><a href="#（一）原型与原型链" class="headerlink" title="（一）原型与原型链"></a>（一）原型与原型链</h3><h4 id="1-原型prototype"><a href="#1-原型prototype" class="headerlink" title="1.原型prototype"></a>1.原型prototype</h4><ul>
<li>所有的对象都是通过<strong>new 函数</strong>来创建的</li>
<li>所有的函数也都是对象，函数也可以有属性</li>
<li>所有的函数都有一个prototype属性，叫做原型<ul>
<li>默认是一个普通对象{}</li>
<li>有一个默认属性constructor，默认指向该构造函数<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>()</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Test</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">Test.prototype = &#123;</span><br><span class="line">  <span class="attr">constructor</span>: Test</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="2-隐式原型-proto"><a href="#2-隐式原型-proto" class="headerlink" title="2.隐式原型__proto__"></a>2.隐式原型__proto__</h4><ul>
<li>所有的对象都有一个默认属性__proto__，叫隐式原型<ul>
<li>默认指向该对象的构造函数的原型</li>
</ul>
</li>
<li>对象成员访问顺序：<ul>
<li>对象自身中是否有该成员，如果有则直接访问</li>
<li>对象隐式原型__proto__中是否有该成员，如果有则直接访问</li>
<li>在原型链中依次查找<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Test</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj1 = <span class="keyword">new</span> Test()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj2 = <span class="keyword">new</span> Test()</span><br><span class="line"></span><br><span class="line">Test.prototype === obj1.__proto__ === obj2.__proto__  ==&gt; <span class="literal">true</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="3-原型链"><a href="#3-原型链" class="headerlink" title="3.原型链"></a>3.原型链</h4><ul>
<li>特殊指向：<ul>
<li>Function的隐式原型__proto__指向自身的原型prototype</li>
<li>Object的原型prototype的隐式原型__proto__指向null</li>
</ul>
</li>
<li>利用原型链访问顺序的特点，即可就近重写继承的成员<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Test</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">Test.prototype === Test.__proto__</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="4-API"><a href="#4-API" class="headerlink" title="4.API"></a>4.API</h4><ul>
<li><strong>Object.getPrototypeOf(obj)</strong> 获取隐式原型（__proto__系统成员不推荐使用）</li>
<li><strong>Object.create(obj)</strong> 以obj为隐式原型创建一个对象</li>
<li><strong>objPrototype.isPrototypeOf(obj)</strong> 判断objPrototype是否在obj的原型链上</li>
<li><strong>obj instanceOf Fn</strong> 判断obj的原型链上是否有Fn的原型（obj 是不是一个 Fn）</li>
<li><strong>obj.hasOwnProperty(x)</strong> 判断x是否是obj自身的属性（遍历对象默认会遍历原型链上的可枚举属性）</li>
</ul>
<h4 id="5-继承（圣杯模式）"><a href="#5-继承（圣杯模式）" class="headerlink" title="5.继承（圣杯模式）"></a>5.继承（圣杯模式）</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherit</span>(<span class="params">son, father</span>)</span>&#123;</span><br><span class="line">  son.prototype = <span class="built_in">Object</span>.create(father.prototype);</span><br><span class="line">  son.prototype.constructor = son;</span><br><span class="line">  son.prototype.uber = father.prototype;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherit</span>(<span class="params">son, father</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> Temp = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">  Temp.prototype = father.prototype;</span><br><span class="line">  son.prototype = <span class="keyword">new</span> Temp();</span><br><span class="line">  son.prototype.constructor = son;</span><br><span class="line">  son.prototype.uber = father.prototype;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> inherit = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> Temp = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">  <span class="keyword">return</span>   <span class="function"><span class="keyword">function</span>(<span class="params">son, father</span>)</span>&#123;</span><br><span class="line">    Temp.prototype = father.prototype;</span><br><span class="line">    son.prototype = <span class="keyword">new</span> Temp();</span><br><span class="line">    son.prototype.constructor = son;</span><br><span class="line">    son.prototype.uber = father.prototype;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;())</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="（二）属性描述符"><a href="#（二）属性描述符" class="headerlink" title="（二）属性描述符"></a>（二）属性描述符</h3><h4 id="1-术语-2"><a href="#1-术语-2" class="headerlink" title="1.术语"></a>1.术语</h4><ul>
<li>元数据：描述数据的数据</li>
<li>数据属性：普通（正常）的属性（默认用数据描述符）</li>
<li>存取属性：添加了访问器（get/set）的属性（用存取描述符）</li>
<li>可读 value</li>
<li>可写 writeable</li>
<li>可枚举 enumerable</li>
<li>可配置 configurable</li>
</ul>
<h4 id="2-描述符可同时具有的键值"><a href="#2-描述符可同时具有的键值" class="headerlink" title="2.描述符可同时具有的键值"></a>2.描述符可同时具有的键值</h4><table>
<thead>
<tr>
<th align="left"></th>
<th align="center">数据描述符</th>
<th align="center">存取描述符</th>
</tr>
</thead>
<tbody><tr>
<td align="left">value</td>
<td align="center">√</td>
<td align="center">×</td>
</tr>
<tr>
<td align="left">writeable</td>
<td align="center">√</td>
<td align="center">×</td>
</tr>
<tr>
<td align="left">enumerable</td>
<td align="center">√</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">configurable</td>
<td align="center">√</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">get</td>
<td align="center">×</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">set</td>
<td align="center">×</td>
<td align="center">√</td>
</tr>
</tbody></table>
<h4 id="3-API"><a href="#3-API" class="headerlink" title="3.API"></a>3.API</h4><ul>
<li><strong>Object.defineProperty(obj, prop, descriptor)</strong> 配置属性描述</li>
<li><strong>Object.getOwnPropertyDescriptor(obj, prop)</strong> 获取属性描述<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(obj, <span class="string">&quot;x&quot;</span>, &#123;</span><br><span class="line">  <span class="attr">get</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//当获取obj.x值时，会运行此函数，此函数返回值始终为表达式的值（属性值）</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;abc&quot;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">set</span>: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//当设置obj.x = &quot;abc&quot;值时，会运行此函数，赋的值始终为函数的value参数值（非属性值）</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h3 id="（三）作用域与作用域链"><a href="#（三）作用域与作用域链" class="headerlink" title="（三）作用域与作用域链"></a>（三）作用域与作用域链</h3><h4 id="1-执行上下文"><a href="#1-执行上下文" class="headerlink" title="1.执行上下文"></a>1.执行上下文</h4><ul>
<li>全局执行上下文：js代码执行前，创建的一块内存空间，存储着代码执行所需的数据，为代码执行提供支持</li>
<li>函数执行上下文：函数运行前，创建的一块内存空间，存储着函数运行所需的数据，为函数运行提供支持</li>
<li>执行上下文栈：call stack所有执行上下文组成的内存空间，js引擎始终执行的是栈顶的上下文</li>
<li>VO：Variable Object 执行上下文对象，记录了该环境中声明的参数、变量、函数</li>
<li>GO：Global Object 全局执行上下文对象，记录了全局环境中声明的变量、函数</li>
<li>AO：Active Object 当前执行上下文对象，记录了当前环境中声明的参数、变量、函数</li>
</ul>
<h4 id="2-执行上下文内容"><a href="#2-执行上下文内容" class="headerlink" title="2.执行上下文内容"></a>2.执行上下文内容</h4><h5 id="（1）this指向"><a href="#（1）this指向" class="headerlink" title="（1）this指向"></a>（1）this指向</h5><ul>
<li>全局环境this指向window对象</li>
<li>函数直接调用this指向window对象</li>
<li>对象方法调用this指向调用对象</li>
<li>new操作符调用this指向创建的新对象</li>
</ul>
<h5 id="（2）预编译"><a href="#（2）预编译" class="headerlink" title="（2）预编译"></a>（2）预编译</h5><ul>
<li>变量声明、函数声明提升，赋默认值：undefined<ul>
<li>若变量声明已存在，则忽略</li>
<li>若函数声明已存在，则覆盖</li>
</ul>
</li>
<li>形参变量赋值为实参值</li>
<li>函数变量赋值为函数对象</li>
</ul>
<h5 id="（3）代码依次执行"><a href="#（3）代码依次执行" class="headerlink" title="（3）代码依次执行"></a>（3）代码依次执行</h5><ul>
<li>遇到赋值语句，对应修改上下文内容</li>
</ul>
<h4 id="3-作用域链"><a href="#3-作用域链" class="headerlink" title="3.作用域链"></a>3.作用域链</h4><ul>
<li>函数自身有一个隐式属性<code>[[scope]]</code>指向该函数定义时的AO</li>
<li>函数执行时，访问一个变量<ul>
<li>在当前执行上下文中查找</li>
<li>若当前VO中不存在，则依次从<code>[[scope]]</code>指向的VO中查找</li>
<li>若最终都没有找到，则会报错</li>
</ul>
</li>
</ul>
<h4 id="4-闭包"><a href="#4-闭包" class="headerlink" title="4.闭包"></a>4.闭包</h4><ul>
<li>每次函数运行都会创建一个新的执行上下文，运行结束即销毁</li>
<li>当函数运行中定义并返回了一个函数，该函数的<code>[[scope]]</code>会保留当前AO</li>
<li>若返回函数的引用存在，导致执行上下文无法销毁，会造成内存泄露</li>
</ul>
<h3 id="（四）事件循环"><a href="#（四）事件循环" class="headerlink" title="（四）事件循环"></a>（四）事件循环</h3><h4 id="1-浏览器线程"><a href="#1-浏览器线程" class="headerlink" title="1.浏览器线程"></a>1.浏览器线程</h4><ul>
<li>JS引擎线程：负责执行js代码</li>
<li>渲染线程：负责渲染页面</li>
<li>计时器线程：负责计时</li>
<li>事件监听线程：负责事件监听</li>
<li>HTTP网络线程：负责网络通信</li>
</ul>
<h4 id="2-事件队列"><a href="#2-事件队列" class="headerlink" title="2.事件队列"></a>2.事件队列</h4><ul>
<li>js是单线程，并不具备处理代码执行以外的事情，只是通过间接的通知其它线程去异步做某些事</li>
<li>当某些条件成熟才运行的函数为异步函数，其它线程并不具备执行函数的功能，只是等条件成熟后将异步函数放入事件队列</li>
<li>js引擎只有当执行栈空闲时，才会去执行事件队列中的第一个异步函数</li>
<li>事件队列是一个堆结构（先进先出）</li>
</ul>
<h4 id="3-事件循环"><a href="#3-事件循环" class="headerlink" title="3.事件循环"></a>3.事件循环</h4><ul>
<li>event loop 是指函数在执行栈、宿主线程、事件队列中的循环移动</li>
</ul>
<hr>
<h3 id="（五）功能与性能"><a href="#（五）功能与性能" class="headerlink" title="（五）功能与性能"></a>（五）功能与性能</h3><h4 id="1-对象混合mixin"><a href="#1-对象混合mixin" class="headerlink" title="1.对象混合mixin"></a>1.对象混合mixin</h4><h4 id="2-对象克隆clone"><a href="#2-对象克隆clone" class="headerlink" title="2.对象克隆clone"></a>2.对象克隆clone</h4><h4 id="3-函数防抖debounce"><a href="#3-函数防抖debounce" class="headerlink" title="3.函数防抖debounce"></a>3.函数防抖debounce</h4><h4 id="4-函数节流throttle"><a href="#4-函数节流throttle" class="headerlink" title="4.函数节流throttle"></a>4.函数节流throttle</h4><h4 id="5-函数科里化curry"><a href="#5-函数科里化curry" class="headerlink" title="5.函数科里化curry"></a>5.函数科里化curry</h4><h4 id="6-函数管道pipe"><a href="#6-函数管道pipe" class="headerlink" title="6.函数管道pipe"></a>6.函数管道pipe</h4>
      
      <!-- 打赏 -->
      
        <div id="reward-btn">
          打赏
        </div>
        
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2017/12/01/ES5a/" data-id="ckya9fc0y000aygf6h5nedq05"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/js-es-es3-es5/" rel="tag">js es es3 es5</a></li></ul>

    </footer>

  </div>

  
  
  <nav class="article-nav">
    
      <a href="/blog/2018/01/01/JQUERYa-0/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            jQuery 初识
          
        </div>
      </a>
    
    
      <a href="/blog/2017/11/15/CSS2/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">CSS 初识</div>
      </a>
    
  </nav>


  

  
  
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        notify: false,
        verify: false,
        app_id: '',
        app_key: '',
        path: window.location.pathname,
        avatar: 'mp',
        placeholder: '给我的文章加点评论吧~',
        recordIP: true
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>
<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>

  

  
  
  

</article>
</section>
      <footer class="footer">
  <div class="outer">
    <ul class="list-inline">
      <li>
        &copy;
        2020-2022
        Huafu Li
      </li>
      <li>
        
          Powered by
        
        
        <a href="https://hexo.io" target="_blank">Hexo</a> Theme <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul class="list-inline">
      <li>
        
        
        <ul class="list-inline">
  <li>PV:<span id="busuanzi_value_page_pv"></span></li>
  <li>UV:<span id="busuanzi_value_site_uv"></span></li>
</ul>
        
      </li>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
    <div class="to_top">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>
      </div>
    </main>
    
    <aside class="sidebar">
      
        <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/blog/"><img src="/blog/hu.png" alt="虎虎生辉"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/archives">目录</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/about">关于</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/pictures">相册</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/blog/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
      </aside>
      <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/alipay.png">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/wechat.png">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
      
<script src="/blog/js/jquery-2.0.3.min.js"></script>


<script src="/blog/js/jquery.justifiedGallery.min.js"></script>


<script src="/blog/js/lazyload.min.js"></script>


<script src="/blog/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/blog/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/blog/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
			onClick: (e) => {
      	document.getElementById(e.target.innerText).scrollIntoView()
      	return false;
    	}
    });
  </script>


<script>
  var ayerConfig = {
    mathjax: false
  }
</script>


<script src="/blog/js/ayer.js"></script>


<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">



<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
  
  

  </div>
</body>

</html>